我有一个webapp react.js / redux / webpackt / es6 …和一个api与大猩猩的mux一起去.
当我用下面的函数打电话时,我的标题是空的,也是内容.
当我用下面的函数打电话时,我的标题是空的,也是内容.
我在我的webapp中使用这个包来打电话
"isomorphic-fetch": "^2.2.1",
我的电话示例
export function Login(userData) {
return dispatch => {
fetch(API + '/login',{
method: 'post',headers: {
'Accept': 'application/json','Content-Type': 'application/json',},body: JSON.stringify({
email: userData.email,password: userData.password,}),})
.then(response => {
console.log(response);
console.log(response.statusText);
console.log(response.status);
console.log(response.headers);
console.log(response.headers.get("Authorization"));
console.log(response.json());
return response.json()
if (response.status >= 200 && response.status < 300) {
console.log(response);
dispatch(LoginSuccess(response));
} else {
const error = new Error(response.statusText);
error.response = response;
dispatch(LoginError(error));
throw error;
}
}).then(function(json) {
console.log('parsed json' + json)
})
.catch(error => { console.log('request Failed',error); });
}
一开始我遇到了问题How to handle preflight CORS requests on a Go server我用过这个解决方案
我们可以在控制台内查看调用：
login OPTIONS 200 fetch auths.actions.js:38 352 B 1 ms login POST 200 json Other 567 B 82 ms
当我查看我的POST Header响应时,我有：
HTTP/1.1 200 OK Access-Control-Allow-Headers: Accept,Content-Type,Content-Length,Accept-Encoding,X-CSRF-Token,Authorization Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,PATCH,DELETE Access-Control-Allow-Origin: http://localhost:3000 Authorization: Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE0NTQ3NTcxNjEsInVzZXJfaWQiOiI1NmI1YjZlOTFhZTMzYjAwMDFhYmE1MTQifQ.WGoTMxm6OuN24Olwr93J3pND9dFLCtG5MyiRbqLWeD244JtDzq0bGgQMixeZxyuxwGK3u8KhyWD7Rr6iZAGNpA Content-Type: application/json Date: Sat,06 Feb 2016 11:12:41 GMT Content-Length: 2
所以响应处理我的预检信息而不是我的POST？因为response.headers和response.headers.get(“授权”)内部没有任何内容
有什么不对吗？
解决方法
我遇到了问题,我的标题已被发送,正确接收(chrome的网络选项卡正确显示我所有发送的标题),但我无法在js中访问它们(response.headers为空).如
Fetch get request returns empty headers中所述,这是因为服务器未设置Access-Control-Expose-Headers标头,导致所需的标头不会暴露给js.
所以解决方案是在服务器上添加这个头文件,现在可以在js中访问头文件：
所以解决方案是在服务器上添加这个头文件,现在可以在js中访问头文件：
Access-Control-Expose-Headers: <header-name>,<header-name>,...
有关为何需要此标头的其他信息,请参阅Why is Access-Control-Expose-Headers needed?
