Почему метод fetch не устанавливает headers-запроса?

Question

[Oleg Vavilov]

В react приложении не получается установить headers для fetch запроса. Пытаюсь сделать Basic Auth. Причем если ставлю

credentials: 'include'

то в окне браузера появляется окно авторизации

Код

let
			headers = new Headers({
				'Content-Type': 'application/json',
				'Authorization': `Basic ${btoa('****:*****')}`
			});

		fetch(url, {
			headers: headers,
			mode: 'no-cors',
			credentials: 'include',
		})
			.then(response => {
				console.log(headers.get('Authorization')); // В консоль выводит то что должно быть в headers

				if (response.status >= 200 && response.status < 300) {
					return response.json();
				} else {
					throw response;
				}
			})
			.then(objects => dispatch({
				type: types.GET_OBJECTS_SUCCESS,
				payload: objects
			}));

А вот скриншот из браузера

Answer 1

[Максим]

На счет нативного fetch, в MDN пример следующий:

var myHeaders = new Headers();

myHeaders.append('Content-Type', 'text/xml');
myHeaders.get('Content-Type') // should return 'text/xml'

Я использую библиотеку isomorphic-fetch.
Для заголовков есть пара хелперов, выглядит так:

export function httpGet(url) {
  return fetch(url, {
    headers: buildHeaders(),
  })
  .then(checkStatus)
}

Заголовки строю следующим образом:

function buildHeaders() {
  const authToken = localStorage.getItem('myapp.token')
  return { ...defaultHeaders, Authorization: authToken }
}

Изначально, значение у defaultHeaders следующее

const defaultHeaders = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
}

Comments

[Oleg Vavilov]

fetch нативный. Я пробовал и просто передавать в headers - объект, но все четно. В headers почему то устанавливается только Accept

[Максим]

Oleg Vavilov: ага, апдейтнул вопрос. Попробуйте как у мозилы в примере, и если не заведется - я бы ушел в npm за пакетом ;)

[Максим]

Oleg Vavilov: еще вариант, поставить туда какой-нибудь другой заголовок. Типа: X-HEADER: hello. Для проверки, что вообще ничего не ставится, а не только Auth.. Не помню, может быть по этой же причине, я когда-то подзабил на нативный fetch.

[Oleg Vavilov]

Максим: А вы точно этот плагин используете для fetch? Там просто как такого метода fetch нет, там fetchUrl, fetchStream

[Максим]

Oleg Vavilov: ага, ошибся - https://www.npmjs.com/package/isomorphic-fetch

[Oleg Vavilov]

Максим: Я его тоже использую. Я похоже нашел в чем проблема, у меня запрос отправляется на сторонний сервис, и мне нужно было использовать не `mode: 'no-cors'`, а `mode: 'cors'` так установленные заголовки не трутся. Но теперь у меня новая проблема, я не могу в WebpackDevServer установить headers: {'Access-Control-Allow-Origin': '*'}

[Максим]

Oleg Vavilov: Олег, а почему у webpackDevServer'a ? У вас api работает на нем же ? тогда да. В противном случае, заголовок нужно устанавливать на сервере, к которому вы стучитесь. Возможно тут https://github.com/gaearon/react-hot-loader/issues... поможет.

[Oleg Vavilov]

Максим: Да, точно. Спасибо Вам большое.

[Максим]

Oleg Vavilov: добро пожаловать)