Почему не работает кросс-доменный fetch?

Question

[Константин Божков]

Вопрос заключается в следующем, необходимо отправить данные на другой домен. У меня это реализовано 2-мя Node.js приложениями под разными портами. На 8080(8081 - прокси) порте расположен UI сервер, заточенный под изоморфный React... На 3000 порте расположен API сервер.

fetch('http://localhost:3000', {
	method: 'post',
	headers: {
		'Access-Control-Allow-Origin':'*',
		 'Accept': 'application/json, text/plain, */*',
		'Content-Type': 'application/json'
	},
	mode: 'cors',
	body: JSON.stringify({a: 7, str: 'Some string: &=&'})
})
	.then(res=>res.json())
	.then(res => console.log(res));

Проблема в том что "установленные" заголовки на сервере не видны

Если запрос отправить на тот же домен с которого загружена страница то все будет успешно.

fetch('http://localhost:8080', {
	method: 'post',
	headers: {
		'Access-Control-Allow-Origin':'*',
		 'Accept': 'application/json, text/plain, */*',
		'Content-Type': 'application/json'
	},
	mode: 'cors',
	body: JSON.stringify({a: 7, str: 'Some string: &=&'})
})
	.then(res=>res.json())
	.then(res => console.log(res));

Как видно на фото заголовки установлены как надо

Как решить эту проблему? Заранее спасибо!

Comments

[maxfox]

Я не увидел, где вы заголовки выставляете.. Если что, то они на сервере выставляются.

[Константин Божков]

maxfox, Заголовки запроса тоже существуют. Они указанны в headers

[maxfox]

На сервере. Приведите серверный код, где вы выставляете заголовки, тогда можно будет говорить о том, что что-то не работает. А пока - их просто нет.

[Константин Божков]

maxfox, На сервере указанны лишь

.use(function(req, res, next) {
	res.setHeader("Access-Control-Allow-Origin", "*");
	return next();
})

[maxfox]

Добавьте Access-Control-Allow-Methods: POST и Access-Control-Allow-Headers: Content-Type.

[Константин Божков]

maxfox, Не получилось, тот же результат. Я возможно чего-то не понимаю, но какое имеют отношение заголовки на сервере к заголовкам запроса? Ведь проблема заключается в том что заголовки запроса некорректны.

[maxfox]

Константин Божков, Кросcдоменные запросы разрешает сервер, а не клиент (иначе в чем смысл CORS?). Так что достаточно сделать Access-Control-Allow-Origin: * и все должно работать. Почему у вас не так - я не знаю.. Что по этому поводу пишет браузер? Есть ли ошибки и какие заголовки приходят с сервера?

[Данакт Фрост]

maxfox, если устанавливается Access-Control-Allow-Methods, помимо POST в нём должен быть прописан OPTIONS. При кросс-доменных запросах браузер делает preflight-request методом OPTIONS, а только затем POST.
Константин Божков, в запросе заголовки вообще можно не писать. Вы делаете запрос preflight-request (автоматически при любом кросс-доменном запросе), вам возвращается ответ с параметрами сервера в виде заголовков. Если в списке заголовков ответа нет разрешения на запросы к ресурсу, браузер блокирует любые запросы к данному ресурсу. Так работает cors.

Выкладывайте, что пишет браузер

[Константин Божков]

maxfox, Спасибо вам за помощь, решил. Удалил на стороне клиента заголовок Access-Control-Allow-Origin. Оставил только:

headers: {
	'Accept': 'application/json, text/plain, */*',
	'Content-Type': 'application/json'
}.

А на сервере достаточно лишь заголовка Access-Control-Allow-Origin: *.
P.S. в браузере ошибок не было.

Answer 1

[Александр Гонтарев]

Access-Control-Allow-Origin надо задавать не на клиенте, а на сервере, на сервере надо указать каким доменам можно делать запрос, т.е. ответ от сервера должен содержать заголовок этот