Чтение заголовков ответов с API-интерфейсом Fetch

Я использую расширение Google Chrome с разрешениями для "*://*/*", и я пытаюсь сделать переход из XMLHttpRequest в Fetch API.

Расширение хранит данные входа пользователя, которые раньше были помещены непосредственно в вызов XHR open() для HTTP Auth, но в Fetch больше нельзя использовать напрямую в качестве параметра. Для HTTP Basic Auth обход этого ограничения тривиален, так как вы можете вручную установить заголовок авторизации:

fetch(url, {
  headers: new Headers({ 'Authorization': 'Basic ' + btoa(login + ':' + pass) })
  } });

HTTP Digest Auth однако требует большей интерактивности; вам необходимо прочитать параметры, которые сервер отправляет вам с ответом 401, чтобы создать действительный токен авторизации. Я попытался прочитать поле заголовка ответа WWW-Authenticate с помощью этого фрагмента:

fetch(url).then(function(resp) {
  resp.headers.forEach(function(val, key) { console.log(key + ' -> ' + val); });
}

Но я получаю только этот вывод:

content-type -> text/html; charset=iso-8859-1

Что само по себе является правильным, но все еще отсутствует около 6 полей в соответствии с инструментами разработчика Chrome. Если я использую resp.headers.get("WWW-Authenticate") (или любое другое поле, если на то пошло), я получаю только null.

Есть ли вероятность попасть в другие поля с помощью API-интерфейса Fetch?

Ответ 1

Существует ограничение доступа к заголовкам ответов при использовании Fetch API через CORS. Из-за этого ограничения вы можете получить доступ только к следующим стандартным заголовкам:

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

Когда вы пишете код для расширения Google Chrome, вы используете CORS, поэтому вы не можете получить доступ ко всем заголовкам. Если вы управляете сервером, вы можете вернуть пользовательскую информацию в ответе body вместо headers

Больше информации об этом ограничении - https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types

Ответ 2

С MDN

Вы также можете получить все заголовки, обратившись к записям Iterator.

// Display the key/value pairs
for (var pair of res.headers.entries()) {
   console.log(pair[0]+ ': '+ pair[1]);
}

Также имейте в виду эту часть:

По соображениям безопасности некоторые заголовки могут контролироваться только пользовательским агентом. Эти заголовки включают в себя имена запрещенных заголовков и имена заголовков запрещенных ответов.

Ответ 3

Для обратной совместимости с браузерами, которые не поддерживают итераторы ES2015 (и, вероятно, также нуждаются в полифиллах выборки/обещания), наилучшим вариантом является функция Headers.forEach :

r.headers.forEach(function(value, name) {
    console(name + ": " + value);
});

Протестировано в IE11 с Bluebird в качестве полизаполнения Promise и whatwg-fetch в качестве полифилла выборки. Headers.entries(), Headers.keys() и Headers.values() не работает.

Ответ 4

Чтобы исправить эту проблему, достаточно добавить открытые имена заголовков.

заголовки контроля доступа: headername1, headername2,...

После установки этого заголовка клиентский скрипт может читать эти заголовки (headername1, headername2,...) из ответа.