Axios 可以访问响应头字段答案

【问题标题】：Axios get access to response header fieldsAxios 可以访问响应头字段
【发布时间】：2018-12-02 13:26:01
【问题描述】：

我正在使用 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"}

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

最佳。

【问题讨论】：

如果你打印出 axios.defaults.headers 是否会给你任何你所缺少的？某些标头是在该级别配置的，而不是在每个请求的级别配置（请参阅github.com/mzabriskie/axios#global-axios-defaults）
不是axios.defaults.headers 用于配置REQUEST头参数吗？我需要访问响应之一。 @BenHare
顺便说一句，你所说的请求，不是请求。这是对你回应的承诺。您的请求就是您作为参数传递给 post() 方法的内容。

标签： http-headers es6-promise axios

【解决方案1】：

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

缓存控制
内容-语言
内容类型
过期
最后修改
编译指示

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

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

【讨论】：

对不起，我忘了公开那些字段。
如果您使用带有 Rack-Cors 的 Rails，您需要在原点上设置 expose: ['Access-Token', 'Uid']，例如：resource '*', :headers => :any, :methods => [:get, :post, :put, :patch, :delete, :options, :head], expose: ['Access-Token', 'Uid']
我不明白。如果它们没有暴露，为什么额外的 headers 在浏览器中可见但在 axios 响应中不可见？
@adanilev，浏览器允许您出于调试目的查看它们，但出于安全原因阻止您通过 API 访问它们。它可以防止客户端从服务器获取安全凭证，从而允许服务器确定客户端的访问权限。 TLDR：这是为了安全而故意这样做的
我的 NGINX 配置文件中有这个...'Access-Control-Expose-Headers' 'Authorization, X-Suggested-Filename, content-disposition' always; 仍然只看到content-type: "application/pdf" 真的需要拉content-disposition

【解决方案2】：

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

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

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

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

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

如果您以res.header('Authorization', `Bearer ${token}`).send(); 的方式发送响应

【讨论】：

对于那些想知道的人，您也可以在这里传递一个数组：exposedHeaders: ['Authorization','X-Total-Count']

【解决方案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;
}

我希望它有效。

【讨论】：

【解决方案4】：

在 asp.net core 中遇到同样的问题希望这会有所帮助

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

【讨论】：

欢迎来到 SO！您的答案可能是正确的，但在 StackOverflow，不鼓励仅发布代码答案。请尝试解释您的答案如何解决原始问题。请阅读此内容以了解如何Write Better Answer

【解决方案5】：

根据official docs：

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

【讨论】：

【解决方案6】：

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

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")

【讨论】：

【解决方案7】：

由于 CORS 限制，无法在客户端访问自定义 HTTP 标头。您需要在服务器端添加 Access-Control-Expose-Headers 设置。

什么是访问控制公开标头？
请转至https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

默认情况下，仅公开这些 HTTP 标头：

缓存控制
内容-语言
内容长度
内容类型
过期
最后修改
编译指示

对于自定义HTTP头，需要在响应头中自定义Access-Control-Expose-Headers。

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

例如，使用django-cors-headers，您可以通过CORS_ALLOW_HEADERS 设置添加要向浏览器公开的HTTP 标头列表

from corsheaders.defaults import default_headers

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

【讨论】：

【解决方案8】：

对于 SpringBoot2 只需添加

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

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

【讨论】：

【解决方案9】：

对于 django 的帮助

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

【讨论】：

至少对于 Flask CORS，您还可以传递一个字典，其中每个键名为 CORS_<property>（在本例中为 expose_headers），并在 CORS(app, **cors_config) 语句中传递所需的值。请参阅文档here

【解决方案10】：

如果您在后端使用 Laravel 8 并正确配置了 CORS，请将此行添加到 config/cors.php：

'exposed_headers' => ['Authorization'],

【讨论】：

谢谢你。我尝试了通配符 '*' ，但没有用，但使用您的答案作为帮助确实对我有帮助。

【解决方案11】：

对于 Spring Boot 2，如果您不想使用全局 CORS 配置，可以通过方法或类/控制器级别使用 @CrossOrigin 注释和 exposedHeaders 属性来完成。

例如，为YourController 方法添加标题authorization：

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

【讨论】：

【解决方案12】：

[扩展@vladimir 所说的内容]

如果您使用的是 Django
和django-cors-headers 允许/控制 CORS，您应该在settings.py

中设置以下内容

CORS_EXPOSE_HEADERS = ['yourCustomHeader']

【讨论】：

【解决方案13】：

这样试试

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

【讨论】：