web-dev-qa-db-ja.com

Axiosはレスポンスヘッダフィールドにアクセスします

私はReactとReduxを使ってフロントエンドのアプリを作成しています。私はリクエストを実行するために axios を使っています。レスポンスのヘッダーにあるすべてのフィールドにアクセスしたいのですが。私のブラウザではヘッダを調べることができ、必要なすべてのフィールド（token、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"}

あなたが見ることができるようにここに私のブラウザネットワークタブ、他のすべてのフィールドが存在しています。

enter image description here

最高です。

http-headerses6-promiseaxios
98
TWONEKSONE

CORS要求の場合、ブラウザはデフォルトで次の応答ヘッダにのみアクセスできます。

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

クライアントアプリが他のヘッダにアクセスできるようにするには、サーバ上で Access-Control-Expose-Headers ヘッダを設定する必要があります。

Access-Control-Expose-Headers: Access-Token, Uid
186
Nick Uraltsev

これは私を本当に助けてくれました。あなたの答えをくれたNick Uraltsevに感謝します。

cors とnodejsを使っている人のために：

...
const cors = require('cors');

const corsOptions = {
  exposedHeaders: 'Authorization',
};

app.use(cors(corsOptions));
...

この場合、あなたはres.header('Authorization', `Bearer ${token}`).send();の方法でレスポンスを送っています。

6
cass_

私は同じ問題に直面していました。 Yは私の "WebSecurity.Java"でこれを行いました。これはcors構成のsetExposedHeadersメソッドに関するものです。

@Bean
CorsConfigurationSource corsConfigurationSource() {

    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowCredentials(true);
    configuration.setAllowedOrigins(Arrays.asList(FRONT_END_SERVER));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
    configuration.setAllowedHeaders(Arrays.asList("X-Requested-With","Origin","Content-Type","Accept","Authorization"));

    // This allow us to expose the headers
    configuration.setExposedHeaders(Arrays.asList("Access-Control-Allow-Headers", "Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, " +
            "Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"));

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

うまくいくことを願っています。

2
Daniel Azamar

Asp.netコアで同じ問題に直面したこれが助けを願って

public static class CorsConfig
{
    public static void AddCorsConfig(this IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder
                .WithExposedHeaders("X-Pagination")
                );
        });
    }
}
1
Nigel Mukandi

私は同じ問題に直面しています。 Access-Control-Expose-Headers: Set-Cookieを設定しましたが、それでもヘッダーから値を読み取ることができません

0
Jack Tang