Чтение заголовков ответов с 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,...) из ответа.