我正在用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的限制,客户端无法访问自定义HTTP标头。您需要在服务器端添加Access-Control-Expose-Headers设置。
什么是Access-Control-Expose-Headers?
请登录https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers
默认情况下,只有这些HTTP报头是公开的:
cache - control
内容语言
内容长度
内容类型
到期
last - modified
编译指示
对于自定义HTTP报头,需要在响应报头中自定义Access-Control-Expose-Headers。
如果你在服务器端使用Django,你可以使用Django - CORS -headers (https://pypi.org/project/django-cors-headers/)进行CORS设置管理。
例如,使用django-cors-headers,你可以添加一个HTTP头列表,通过CORS_ALLOW_HEADERS设置向浏览器公开
from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = list(default_headers) + [
'my-custom-header',
]