[解決済み] Fetch APIでレスポンスヘッダーを読み込む
質問
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
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] JavaScriptで2つの日付を比較する
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] Node.jsのES6クラスをrequireで作る