我正在尝试新的Fetch API,但cookie有问题。具体来说,在成功登录后,在未来的请求中有一个Cookie报头,但Fetch似乎忽略了这个报头,并且我所有的请求都是未经授权的。
是因为Fetch还没有准备好,还是Fetch不能与cookie一起工作?
我用Webpack构建我的应用程序。我也在React Native中使用Fetch,它没有同样的问题。
我正在尝试新的Fetch API,但cookie有问题。具体来说,在成功登录后,在未来的请求中有一个Cookie报头,但Fetch似乎忽略了这个报头,并且我所有的请求都是未经授权的。
是因为Fetch还没有准备好,还是Fetch不能与cookie一起工作?
我用Webpack构建我的应用程序。我也在React Native中使用Fetch,它没有同样的问题。
当前回答
如果它仍然不能为您修复凭证后。
我还用了:
credentials: "same-origin"
它曾经工作,然后它不再突然,在挖掘了很多之后,我意识到我已经把我的网站url更改为http://192.168.1.100来测试它在局域网,这是用来发送请求的url,即使我是在http://localhost:3000上。
总之,要确保页面的域与获取url的域相匹配。
其他回答
刚刚解出来。只是两天的蛮力
对我来说,秘诀如下:
我调用POST /api/auth,看到cookie被成功接收。 然后用凭据调用GET /api/users/: 'include',得到401 unauth,因为请求中没有发送cookie。
KEY是为第一次/api/auth调用设置凭据:'include'。
如果它仍然不能为您修复凭证后。
我还用了:
credentials: "same-origin"
它曾经工作,然后它不再突然,在挖掘了很多之后,我意识到我已经把我的网站url更改为http://192.168.1.100来测试它在局域网,这是用来发送请求的url,即使我是在http://localhost:3000上。
总之,要确保页面的域与获取url的域相匹配。
如果你是在2019年读这篇文章,凭证:“同源”是默认值。
fetch(url).then
这对我来说很管用:
import Cookies from 'universal-cookie';
const cookies = new Cookies();
function headers(set_cookie=false) {
let headers = {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
};
if (set_cookie) {
headers['Authorization'] = "Bearer " + cookies.get('remember_user_token');
}
return headers;
}
然后构建你的调用:
export function fetchTests(user_id) {
return function (dispatch) {
let data = {
method: 'POST',
credentials: 'same-origin',
mode: 'same-origin',
body: JSON.stringify({
user_id: user_id
}),
headers: headers(true)
};
return fetch('/api/v1/tests/listing/', data)
.then(response => response.json())
.then(json => dispatch(receiveTests(json)));
};
}
除了@Khanetor的回答,对于那些处理跨来源请求的人:凭据:“包括”
示例JSON获取请求:
fetch(url, {
method: 'GET',
credentials: 'include'
})
.then((response) => response.json())
.then((json) => {
console.log('Gotcha');
}).catch((err) => {
console.log(err);
});
https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials