Axios 可以访问响应 header 字段

Question

我正在使用 React 和 Redux 构建一个前端应用程序，我正在使用 axios 来执行我的请求。我想访问响应 header 中的所有字段。在我的浏览器中，我可以检查 header 并且我可以看到我需要的所有字段都存在（例如令牌、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"}

这是我的浏览器网络选项卡，您可以看到所有其他字段都存在。

最佳。

Answer 1

对于 CORS 请求，浏览器默认只能访问以下响应 header：

Cache-Control
Content-Language
Content-Type
过期
Last-Modified
编译指示

如果您希望您的客户端应用能够访问其他 header，您需要在服务器上设置 Access-Control-Expose-Headers header：

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

Answer 2

这对我很有帮助，感谢 Nick Uraltsev 的回答。

对于那些使用 nodejs 和 cors 的人：

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

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

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

如果您以 res.header('Authorization', `Bearer ${token}`).send();

的方式发送响应

Answer 3

我遇到了同样的问题。我在我的 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;
}

希望有用。

Answer 4

在 asp.net 核心中遇到同样的问题希望这有帮助

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

Answer 5

求 django 帮助

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

Answer 6

根据official docs：

如果您想要服务器响应的 HTTP header，这可能会有所帮助。所有 header 名称都是小写的，可以使用括号表示法访问。示例：response.headers['content-type'] 将给出如下内容：headers: {},

Answer 7

对于 SpringBoot2 只需添加

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

将您的 CORS 过滤器实现代码加入白名单 custom-header1 和 custom-header2 等

Answer 8

对于 Spring Boot 2，如果您不想使用全局 CORS 配置，您可以通过方法或 class/controller 级别使用 @CrossOrigin 注释和 exposedHeaders 属性.

例如，要为 YourController 方法添加 header authorization：

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

Answer 9

由于 CORS 限制，无法在 client-side 上访问自定义 HTTP headers。您需要在 server-side.

上添加 Access-Control-Expose-Headers 设置

什么是Access-Control-Expose-Headers？
请前往https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

默认情况下只有这些 HTTP headers 公开：

Cache-Control
Content-Language
Content-Length
Content-Type
过期
Last-Modified
杂注

对于自定义 HTTP headers，您需要自定义 Access-Control-Expose-Headers 响应 headers。

如果您在服务器端使用 Django，您可以使用 django-cors-headers (https://pypi.org/project/django-cors-headers/) 进行 CORS 设置管理。

例如，对于 django-cors-headers，您可以通过 CORS_ALLOW_HEADERS 设置

添加要向浏览器公开的 HTTP headers 列表

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'my-custom-header',
]

Answer 10

如果您在正确配置 CORS 的 back-end 端使用 Laravel 8，请将此行添加到 config/cors.php:

'exposed_headers' => ['Authorization'],

Answer 11

还有一个暗示不在此对话中。 asp.net 核心 3.1 首先添加您需要将其放入 header 的密钥，如下所示：

Response.Headers.Add("your-key-to-use-it-axios", "your-value");

在您定义 cors 策略的地方（通常在 Startup.cs 中），您应该像这样将此密钥添加到 WithExposedHeaders。

          services.AddCors(options =>
        {
        options.AddPolicy("CorsPolicy",
            builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .WithExposedHeaders("your-key-to-use-it-axios"));
        });
    }

您可以在此处添加所有密钥。现在在您的客户端，您可以使用响应结果轻松访问 your-key-to-use-it-axios。

          localStorage.setItem("your-key", response.headers["your-key-to-use-it-axios"]);

你可以在所有的客户端使用它，像这样访问它：

const jwt = localStorage.getItem("your-key")

Answer 12

[扩展@vladimir 所说的内容]

如果您使用的是 Django
和 django-cors-headers 到 allow/control CORS，您应该在 settings.py

中设置以下内容

CORS_EXPOSE_HEADERS = ['yourCustomHeader']

Answer 13

这样试试

            .then(res =>{
                console.log(res);
                console.log(res.headers['x-total-count']);
                setTotalRecords(res.headers['x-total-count']);
                setTableData(res.data);
            });

Answer 14

如果您使用的是没有 django-cors-headers 的 Django，您可以编写自定义中间件。

class CustomCorsMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response['Access-Control-Expose-Headers'] = 'MY-HEADER, ANOTHER-HEADER'

        return response

您还可以在这里设置其他CORS头。

那么您应该通过将中间件插入项目 settings.py 文件中 MIDDLEWARE 列表的开头来注册中间件。

MIDDLEWARE = [
    'myapp.middleware.CustomCorsMiddleware',
    ...
]

Axios 可以访问响应 header 字段

Axios get access to response header fields

http-headers

es6-promise

axios