1. ホーム
  2. http-headers

[解決済み】Axiosが応答ヘッダーフィールドにアクセスできるようになる

2022-04-02 22:17:53

質問

ReactとReduxを使ってフロントエンドアプリを作っているのですが、その際に アクシオス を使用してリクエストを実行します。レスポンスのヘッダーにあるすべてのフィールドにアクセスできるようにしたい。ブラウザでヘッダーを検査すると、私が必要とするすべてのフィールドが存在することがわかります(トークン、uidなど...)。

const request = axios.post(`${ROOT_URL}/auth/sign_in`, props);
request.then((response)=>{
  console.log(response.headers);
});

私はちょうど

Object {content-type: "application/json; charset=utf-8", cache-control: "max-age=0, private, must-revalidate"}

ブラウザのネットワークタブを見ると、他のフィールドはすべて存在していることがわかります。

ベスト

解決方法は?

CORSリクエストの場合、ブラウザはデフォルトで以下のレスポンスヘッダーにしかアクセスできません。

  • キャッシュコントロール
  • コンテンツ言語
  • コンテンツタイプ
  • 有効期限
  • 最終更新日
  • プラグマ

クライアントアプリから他のヘッダにアクセスできるようにしたい場合は、クライアントアプリに アクセス制御-公開-ヘッダ ヘッダをサーバに送信します。

Access-Control-Expose-Headers: Access-Token, Uid