Axios可以访问响应头字段


160

我正在使用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
奔野兔

2
是不是axios.defaults.headers用于配置REQUEST标头参数?我需要访问响应之一。@BenHare
TWONEKSONE

顺便说一句,您所说的请求不是请求。这是您的回应的保证。您的请求就是您作为参数传递给post()方法的内容。
丹尼尔(Daniel)

Answers:


310

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

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

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

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

我不好,我忘了公开这些领域。
TWONEKSONE

27
如果您将Rails与Rack-Cors配合使用,则需要设置expose: ['Access-Token', 'Uid']原点,例如:resource '*', :headers => :any, :methods => [:get, :post, :put, :patch, :delete, :options, :head], expose: ['Access-Token', 'Uid']
CWitty

3
我不明白 如果未公开,为什么其他标题在浏览器中可见,而在axios响应中却看不到?
adanilev '18

4
@adanilev,浏览器允许您出于调试目的查看它们,但出于安全原因,您无法通过API访问它们。它阻止客户端从服务器获取安全的凭据,从而允许服务器确定客户端具有的访问权限。TLDR:它是有目的的安全性做了
erfling

2
我的NGINX confg文件中有此文件... 'Access-Control-Expose-Headers' 'Authorization, X-Suggested-Filename, content-disposition' always; 仍然只看到content-type: "application/pdf" 确实需要拉content-disposition
Old Walter

17

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

对于那些你使用的NodeJSCORS

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

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

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

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


1
对于那些想知道的人,您也可以在此处传递一个数组:暴露的标题:['Authorization','X-Total-Count']
Thiago Santana

11

我面临着同样的问题。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;
}

我希望它能起作用。


7

在asp.net核心中也面临同样的问题希望对您有所帮助

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

1
欢迎来到SO!您的答案可能是正确的,但是在StackOverflow上,不建议仅发布代码答案。请尝试提供有关您的答案如何解决原始问题的说明。请阅读有关如何编写更好答案的内容
nircraft

谢谢,它对您有所帮助;)
弗洛里安(Florian

2

根据官方文档

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


1

对于SpringBoot2,只需添加

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

您CORS过滤器实现代码已列入白名单custom-header1custom-header2



0

对于Spring Boot 2,如果您不想使用全局CORS配置,则可以在方法或类/控制器级别使用@CrossOriginexposedHeaders属性的注释来实现。

例如,authorizationYourController方法添加标题:

@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
    ...
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.