Почему fetch не возвращает json?

Question

[Issue]

Когда я вызываю функцию localhost() в devtools видно, что возвращается от сервера json, но условие response.ok не выполняется. В консоль выводит OK: false и STATUS: 0. Почему так происходит и как мне получить json? Это условие скопировано с сайта javascript.ru.

async function localhost(request){
	var request = "http://localhost/"+request;
	let response = await fetch(request, { mode: "no-cors" });
	if (response.ok) {
		let json = await response.json();
		console.log(response);
	} else {
		console.log("OK: " + response.ok);
		console.log("STATUS: " + response.status);
	}
}

Comments

[Дмитрий Кузнецов]

что выводит в консоль response?

[Issue]

Дмитрий Кузнецов, Возвращает объект:

Response {
	body: (null)
	bodyUsed: false
	headers: Headers {
		[[Prototype]]: Headers
			append: ƒ append()
			delete: ƒ delete()
			entries: ƒ entries()
			forEach: ƒ forEach()
			get: ƒ ()
			has: ƒ has()
			keys: ƒ keys()
			set: ƒ ()
			values: ƒ values()
			constructor: ƒ Headers()
			Symbol(Symbol.iterator): ƒ entries()
			Symbol(Symbol.toStringTag): "Headers"
			[[Prototype]]: Object
	}
	ok: false
	redirected: false
	status: 0
	statusText: ""
	type: "opaque"
	url: ""
	[[Prototype]]: Response
		arrayBuffer: ƒ arrayBuffer()
		blob: ƒ blob()
		body: (…)
		bodyUsed: (…)
		clone: ƒ clone()
		formData: ƒ formData()
		headers: (…)
		json: ƒ json()
		ok: (…)
		redirected: (…)
		status: (…)
		statusText: (…)
		text: ƒ text()
		type: (…)
		url: (…)
		constructor: ƒ Response()
		Symbol(Symbol.toStringTag): "Response"
		get body: ƒ body()
		get bodyUsed: ƒ bodyUsed()
		get headers: ƒ headers()
		get ok: ƒ ok()
		get redirected: ƒ redirected()
		get status: ƒ status()
		get statusText: ƒ statusText()
		get type: ƒ type()
		get url: ƒ url()
}

[Issue]

Попробовал убрать проверку на response.ok:

async function localhost(request){
	var request = "http://localhost/"+request;
	let response = await fetch(request, { mode: "no-cors" });
	let json = await response.json();
	console.log(json);
}

main.js:12 Uncaught (in promise) SyntaxError: Unexpected end of input at localhost (main.js:12:28)

[Lynn «Кофеман»]

А что в логах http запросов?

Впрочем это не очень важно потому что при no-cors тело ответа получить в принципе нельзя.

Answer 1

[Надим]

У вас наверняка в консоли есть красные надписи - загуглите их и все станет ясно.

Comments

[Issue]

Наверняка вы не знаете о чем говорите. Поверьте, если уж я пишу на JS, то я знаю, что делать с красными надписями. Дело в том, что их нет! Жаль нет дизлайка в хабре...

[Надим]

Issue, уберите mode: "no-cors" и красные надписи появятся. Там у вас по любому ошибка CORS: тема пережевана вдоль и поперек, тут каждый месяц хотя бы один раз да спрашивают про CORS =)

P. S. mode: "no-cors" не предполагает получения ответа. Вы можете отправить запрос вопреки установкам безопасности браузера, но с mode: "no-cors" вы не сможете прочитать ответ. Чтобы мочь прочитать ответ, сервер должен отдать специальные разрешающие заголовки. Гуглите про CORS.

Answer 2

[GrayHorse]

HTTP сервер не возвращает заголовок status / Status line.

И условие response.ok не срабатывает, т.к.

response.status.toString().startsWith("2") === false

---

UPD.
Ах да:

{mode: "no-cors"}
Классика.
Гениально.
Удоли.
Что-то мне подсказывает, что запрос кросс-ориджиновский.

---

Это условие скопировано с сайта javascript.ru.

Только вот там и пример внезапно рабочий:

let response = await fetch(url);

if (response.ok) { // если HTTP-статус в диапазоне 200-299
  // получаем тело ответа (см. про этот метод ниже)
  let json = await response.json();
} else {
  alert("Ошибка HTTP: " + response.status);
}

Comments

[Issue]

Я пробовал в PHP дописать http_response_code, но результат тот-же...

[GrayHorse]

Удали {mode: "no-cors"} и больше не используй это.
Никогда.

[Issue]

GrayHorse, Это было единственное решение для этой проблемы:
Access to fetch at 'localhost' from origin 'https://mainsrv/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[GrayHorse]

Это не было решением и не является решением "проблемы" CORS.

[GrayHorse]

Тем более, что есть доступ к серверу.

[Issue]

GrayHorse, Это было решением. И все прекрасно работает. Только сейчас мне помимо отправки данных нужно получить ответ. И ответ я получить не могу, а отправить данные не проблема. Так что это было решением! Теперь он даже не отправляет данные с этой ошибкой.

[GrayHorse]

Ну, кстати, да. Отправить все же можно, но это из разряда хаков.

Короче.
При использовании {mode: "no-cors"} доступа к ответу не будет. Вместо него будет "заглушка".
Решается элементарно добавлением заголовка на сервере. 100500 тем об CORS.

Единственное нормальноe использование этого мода лишь кеширование в сервис воркере.

[GrayHorse]

И если включить "Log XMLHttprequests" в DevTools выводится ошибка "Fetch failed loading: GET "..."" для таких запросов, хоть и не красным текстом.

[Lynn «Кофеман»]

Issue
> это было решением

Ну, гильотина это тоже решение проблем с перхотью. Но почему никто не соглашается…