Axios可以访问响应头字段

Question

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

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

最好的。

Answer 1

我也面临着同样的问题。我在我的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 2

这真的帮助了我，谢谢尼克·乌拉尔采夫的回答。

对于在cors中使用nodejs的用户：

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

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

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

在这种情况下，您以res.header（'Authorization'，'Bearer${token}`）的方式发送响应。send（）

Answer 3

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

• 缓存控制

如果希望客户端应用能够访问其他头，则需要在服务器上设置“访问控制公开头”头：

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