フェッチAPIレスポンスヘッダーが表示されない

Question

を使用して簡単なWebアプリケーションを構築しています。ReactJSとcreate-react-app

私はHeroku上でバックアップAPIを設定しており、POSTリクエストを作成できます。

fetch APIを使用してPOSTリクエストを行うと、応答は100％正確ですが、標準ヘッダーは2つしかありません。カスタムヘッダーを取得したい返信に公開ヘッダーを追加しました。ここにはプロットツイストがあります：Chrome Inspection ToolまたはPostman（APIツール）からヘッダーを見ると、カスタムヘッダーを含むすべてのヘッダーが表示されます。それはどんな違いをした場合、このフェッチ方法はReactJS部品の本体外側の関数から呼び出され、

fetch(theUrl, { 
    method: 'POST', 
    body: JSON.stringify({ 
    "placeholder": "placeholder" 
    }) 
}) 
.then(function(res) { 
    console.log(res.headers.get('CUSTOM_HEADER_NAME')); 
}) 

からは、ここに私が使用しているフェッチコードです。

カスタムヘッダーの名前はImage-Identification-Pathで、レスポンスヘッダーのヘッダーはImage-Identification-Pathの場合はAccess-Control-Expose-Headersです。

要約：フェッチを使用してカスタムヘッダーを取得するにはどうすればよいですか？

Answer 1

応答がAccess-Control-Expose-Headersというヘッダーを持ち、その値にカスタム応答ヘッダーの名前が含まれるように、要求が行われるサーバーを構成する必要があります。

これ以外の場合、ブラウザにカスタムヘッダーの名前が表示されない場合は、カスタム応答ヘッダーの値にアクセスすることはできません。

このような場合は、Postmanやブラウザのdevtoolsで応答を見ると、カスタムヘッダーが表示されることが予想されます。

しかし、ブラウザが応答でカスタムヘッダーを取得しているとは限らないため、ブラウザがクライアント側のJavaScriptコードにその文字列を公開するわけではありません。

原産地間の要求の場合、ブラウザは、そのヘッダー名がAccess-Control-Expose-Headersヘッダーの値にある場合にのみ、そのカスタム応答ヘッダーをクライアントコードに公開します。