Axios可以访问响应头字段(示例代码)

栏目: ios · 发布时间: 2021-05-07

简介  这篇文章主要介绍了Axios可以访问响应头字段(示例代码)以及相关的经验技巧,文章约3411字,浏览量367,点赞数3,值得参考!

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

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

enter image description here

最好成绩。

答案

在CORS请求的情况下,浏览器默认只能访问以下响应头:

  • 缓存控制
  • 内容语言
  • 内容类型
  • 过期
  • 最后修改

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

Access-Control-Expose-Headers: Access-Token, Uid
另一答案

这真的对我有所帮助,感谢Nick Uraltsev的回答。

对于那些使用带有cors的nodejs的人:

...
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")
                );
        });
    }
}
另一答案

我面临同样的问题。我设置Access-Control-Expose-Headers: Set-Cookie仍然无法读取标头中的值


以上就是本文的全部内容,希望对大家的学习有所帮助,本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

vue:axios拦截器

axios请求拦截器、响应拦截器、vue-router路由导航守卫的使用(案例)

如何在axios中设置全局标头?

HTTP协议---HTTP请求中的常用请求字段和HTTP的响应状态码及响应头

Cookie知识点总结(示例代码)

一些安全相关的HTTP响应头

HTTP的请求和响应

在预检响应中,Access-Control-Allow-Headers不允许请求头字段X-CSRFToken(示例代码)