Axios có quyền truy cập vào các trường tiêu đề phản hồi

Tôi đang xây dựng một ứng dụng lối vào với React và Redux và tôi đang sử dụng các axios để thực hiện các yêu cầu của mình. Tôi muốn có quyền truy cập vào tất cả các trường trong tiêu đề của phản hồi. Trong trình duyệt của tôi, tôi có thể kiểm tra tiêu đề và tôi có thể thấy rằng tất cả các trường mà tôi cần đều có mặt (như mã thông báo, uid, v.v.), nhưng khi tôi gọi

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

Tôi chỉ nhận được

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

Ở đây, tab mạng trình duyệt của tôi, như bạn có thể thấy tất cả các trường khác có mặt.

Tốt nhất

Trong trường hợp yêu cầu CORS, các trình duyệt chỉ có thể truy cập các tiêu đề phản hồi sau theo mặc định:

• Kiểm soát bộ nhớ cache
• Nội dung ngôn ngữ
• Loại nội dung
• Hết hạn
• Sửa đổi lần cuối
• Thực dụng

Nếu bạn muốn ứng dụng khách của mình có thể truy cập các tiêu đề khác, bạn cần đặt tiêu đề Access-Control-Expose-Headers trên máy chủ:

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

Điều này thực sự giúp tôi, cảm ơn Nick Uraltsev vì câu trả lời của bạn.

Đối với những bạn sử dụng nodejs với cors :

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

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

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

Trong trường hợp bạn đang gửi phản hồi theo cách res.header('Authorization', `Bearer ${token}`).send();

Tôi đã phải đối mặt với cùng một vấn đề. Y đã làm điều này trong "WebSecurity.java" của tôi, đó là về phương thức setExposedHeaders trong cấu hình cors.

@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;
}

Tôi hy vọng nó hoạt động.

Đối mặt với vấn đề tương tự trong lõi asp.net Hy vọng điều này sẽ giúp

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

Theo tài liệu chính thức :

Điều này có thể hữu ích nếu bạn muốn các tiêu đề HTTP mà máy chủ phản hồi . Tất cả các tên tiêu đề được đặt thấp hơn và có thể được truy cập bằng cách sử dụng ký hiệu ngoặc. Ví dụ: response.headers['content-type']sẽ cung cấp một cái gì đó như: tiêu đề: {},

Đối với SpringBoot2 chỉ cần thêm

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

mã triển khai bộ lọc CORS của bạn để có danh sách trắng custom-header1và custom-header2vv

để giúp django

CORS_EXPOSE_HEADERS = [
        'your header'
    ]