我正在尝试新的 Fetch API，但在使用 Cookie 时遇到问题。具体来说，登录成功后，以后的请求中会有一个 Cookie 标头，但 Fetch 似乎会忽略该标头，并且我使用 Fetch 发出的所有请求都是未经授权的。
是因为 Fetch 还没有准备好，还是 Fetch 不能与 Cookie 配合使用？
我使用 Webpack 构建我的应用程序。我也在React Native中使用Fetch，没有同样的问题。
Fetch默认不使用cookie。要启用 cookie，请执行此操作：
fetch(url, {
credentials: "same-origin"
}).then(...).catch(...);
除了@Khanetor的回答之外，对于那些处理跨源请求的人：
credentials: 'include'示例 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
刚刚解决了。就两个f。暴力的日子
对我来说，秘诀如下：
我调用 POST /api/auth 看到 cookie 已成功接收。
然后使用
credentials: 'include'关键是为第一个
credentials: 'include'/api/auth如果您在 2019 年阅读本文，则
credentials: "same-origin"fetch(url).then
以编程方式覆盖浏览器端的
Cookie在
fetchCookieCookie: 'xxx=yyy'document.cookiefetch('https://httpbin.org/cookies', {
headers: {
Cookie: 'xxx=yyy'
}
}).then(response => response.json())
.then(data => console.log(JSON.stringify(data, null, 2)));
附注您可以通过在 Chrome 浏览器中打开
https://httpbin.org/cookies/set/foo/bar来创建示例 cookie
foo=bar。
有关详细信息，请参阅禁止的标头名称。
只是为
.netwebapi2如果您使用
corswebapiSupportsCredentials=true // Access-Control-Allow-Origin
// https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
var cors = new EnableCorsAttribute(Settings.CORSSites,"*", "*");
cors.SupportsCredentials = true;
config.EnableCors(cors);
这对我有用：
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)));
};
}
我也正在使用：
credentials: "same-origin"
它曾经可以工作，然后突然不再工作了，经过深入研究，我意识到我已将网站网址更改为
http://192.168.1.100http://localhost:3000所以总而言之，请确保页面的域与获取网址的域匹配。
我的问题是我的 cookie 设置在特定的 URL 路径上（例如，
/authfetchpath/如果
fetch我观察到我的服务器正在返回带有
Locationhttphttps(blocked:mixed-content)如果有人感兴趣，在这种特殊情况下，SSL 终止是在反向代理中执行的，但是由于配置错误，
gunicornsecure-scheme-headersforwarded_allow_ipsfetch我浪费了三个小时寻找解决方案，所以我决定分享我的发现。
login(email: string, password: string): Promise<User | null> {
return fetch('http://localhost:8080/api/login', {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email,
password: password,
}),
})
.then(response => {
this.handleError(response);
return response.ok ? response.json() : null;
})
}
Set-CookiesAccess-Control-Allow-Headers