☰

Fetch API でレスポンス ヘッダーを読み取る 質問する

tag-icon • tag-icon javascript google-chrome-extension
Fetch API でレスポンス ヘッダーを読み取る 質問する

私はGoogle Chrome拡張機能の権限を持っており"*://*/*"、XMLHttpRequestからフェッチAPI。

拡張機能は、HTTP 認証の XHR の open() 呼び出しに直接入力されていたユーザー入力ログイン データを保存しますが、Fetch ではパラメーターとして直接使用できなくなりました。HTTP 基本認証の場合、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 を使用して他のフィールドにアクセスする可能性はありますか?

ベストアンサー1

CORS 経由で Fetch API を使用する場合、レスポンス ヘッダーへのアクセスには制限があります。この制限により、次の標準ヘッダーにのみアクセスできます。

  • 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

おすすめ記事