1. ホーム
  2. javascript

[解決済み] Fetch APIでレスポンスヘッダーを読み込む

2022-10-30 20:22:35

質問

Google Chromeの拡張機能で、パーミッションが "*://*/*" に対するパーミッションがあり、XMLHttpRequest から Fetch API .

この拡張機能は、HTTP AuthではXHRのopen()呼び出しに直接置かれていたユーザー入力のログインデータを保存しますが、Fetchではもはやパラメータとして直接使用することはできません。HTTP Basic Auth では、Authorization ヘッダーを手動で設定できるため、この制限を回避することは些細なことです。

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

HTTPダイジェスト認証 有効な認証トークンを作成するために、サーバーが 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

これ自体は正しいのですが、Chromeのデベロッパーツールによると、まだ6つほどフィールドが不足しています。もし私が resp.headers.get("WWW-Authenticate") (あるいは他のフィールド)を使用すると null .

Fetch API を使用して、これらの他のフィールドにアクセスできる可能性はありますか?

どのように解決するのですか?

Fetch API over 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