Fetch APIで応答ヘッダーを読み取る

Question

私は"*://*/*"の権限を持つGoogle Chrome拡張機能にあり、XMLHttpRequestからFetch APIに切り替えるようにしています。

エクステンションは、HTTP認証のXHRのopen（）呼び出しに直接使用されていたユーザー入力ログインデータを格納しますが、フェッチの下で直接パラメータとして直接使用することはできません。手動Authorizationヘッダを設定することができるようにHTTP基本認証のために、この制限を回避することは、自明である。

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となります。

Fetch APIを使用して他のフィールドにアクセスする可能性はありますか？

Answer 1

CORSでFetch APIを使用している場合、応答ヘッダーにアクセスするための制限があります。この制限あなたが原因、あなただけの次の標準ヘッダにアクセスすることができます

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

Google Chrome拡張機能のコードを書くときは、CORSを使用しているため、すべてのヘッダーにアクセスすることはできません。あなたは、サーバーを制御する場合は、代わりにこの制限にheaders

詳細情報の応答bodyにカスタム情報を返すことができます - イテレータを使用してhttps://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types

Answer 2

MDN

から、あなたはまた、エントリのイテレータにアクセスすることにより、すべてのヘッダを取得することができます。

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

また、心this一部に保つ：セキュリティ上の理由から

は、いくつかのヘッダのみをユーザエージェントによって制御することができます。これらのヘッダーには、禁止ヘッダー名と禁止応答ヘッダー名が含まれます。