Axiosは応答ヘッダーフィールドにアクセスできます

ReactとReduxを使用してフロントエンドアプリを構築しています。リクエストを実行するためにaxiosを使用しています。応答のヘッダーのすべてのフィールドにアクセスしたいのですが。私のブラウザーでは、ヘッダーを調べて、必要なすべてのフィールド（トークン、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-Control-Expose-Headers: Access-Token, Uid

これは本当に役に立ちました。あなたの答えをくれたNick Uraltsevに感謝します。

使用してあなたのそれらのためにnodejsでCORSを：

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

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

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

の方法で応答を送信している場合 res.header('Authorization', `Bearer ${token}`).send();

私も同じ問題に直面していました。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;
}

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

asp.netコアで同じ問題に直面しましたこれが役立つことを願っています

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

公式ドキュメントによると：

これは、サーバーがで応答したHTTPヘッダーが必要な場合に役立ちます。すべてのヘッダー名は小文字であり、ブラケット表記を使用してアクセスできます。例：response.headers['content-type']ヘッダー：{}、

SpringBoot2の場合は追加するだけです

httpResponse.setHeader("Access-Control-Expose-Headers", "custom-header1, custom-header2");

あなたのCORSフィルタの実装コードにホワイトリストに登録しているとcustom-header1し、 custom-header2など

ジャンゴのヘルプ

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

Spring Boot 2の場合、グローバルCORS構成を使用しない場合は、@CrossOrigin属性付きのexposedHeaders注釈を使用して、メソッドまたはクラス/コントローラーレベルで構成できます。

たとえばauthorization、YourControllerメソッドのヘッダーを追加するには：

@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
    ...
}