我正在用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 CORS请求中，默认情况下浏览器只能访问少数报头。
但是如果你需要从响应中访问一个自定义的头，你必须从你的后端服务器用access - control - expose - headers发送响应。
Hare是Nodejs后端和Reactjs前端的一个例子:
res.header('Access-Control-Expose-Headers', 'x-xsrf-token');
return res.header("x-xsrf-token", token).status(200)
.send({
id: user.id,
email: user.email,
});
res.header(“Access-Control-Expose-Headers”、“x-xsrf-token”);
对于这一行，我可以记录我的自定义标题
axios.post("/login", {
email: emailInput.current.value,
password: passwordInput.current.value,
})
.then(function (response) {
console.log(response.headers["x-xsrf-token"]);
});
在你的响应中没有Access-Control-Expose-Headers，你将在控制台日志中得到undefine。检查您的响应头在网络选项卡，它包含与您的自定义名称的头。
其他回答
对于CORS请求，浏览器默认只能访问以下响应头:
cache - control 内容语言 内容类型 到期 last - modified 编译指示
如果你想让你的客户端应用能够访问其他头文件，你需要在服务器上设置access - control - expose - headers头文件:
Access-Control-Expose-Headers: Access-Token, Uid
[扩展@vladimir所说的话]
如果你使用的是Django 和django-cors-headers允许/控制CORS， 您应该在settings.py中设置以下内容
CORS_EXPOSE_HEADERS = ['yourCustomHeader']
在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")
);
});
}
}
如果你在后端使用Laravel 8，正确配置CORS，添加这一行到config/ CORS .php:
'exposed_headers' =>['授权']，
对于Spring Boot 2，如果你不想使用全局CORS配置，你可以通过方法或类/控制器级别使用@CrossOrigin声明和exposedHeaders属性来实现。
例如，为YourController方法添加头授权:
@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
...
}
