使用Cookie获取API

Question

我正在尝试使用新的Fetch API但是遇到了Cookie问题.具体来说,在成功登录后,将来的请求中会有一个Cookie标头,但是Fetch似乎忽略了这些标头,而我使用Fetch发出的所有请求都是未经授权的.

是因为Fetch还没有准备好,或者Fetch不能与Cookies一起使用？

我用Webpack构建我的应用程序.我也在React Native中使用Fetch,它没有相同的问题.

Answer 1

默认情况下,Fetch不使用cookie.要启用cookie,请执行以下操作:

fetch(url, {
  credentials: "same-origin"
}).then(...).catch(...);

Answer 2

除了@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

Answer 3

刚刚解决了.只有两个f.残酷的日子

对我来说,秘诀在于:

1. 我打电话给POST/api/auth,看到cookie已成功收到.

2. 然后调用GET/api/users/credentials: 'include'并获得401 unauth,因为没有cookie与请求一起发送.

KEY也是credentials: 'include'为第一个/ api/auth调用设置的.

Answer 4

Cookie在浏览器端以编程方式覆盖标头将不起作用。

在fetch文档中，请注意某些名称是禁止的。被提到。并且Cookie恰好是禁止的标头名称之一，无法以编程方式修改。以下面的代码为例：

• 在https://httpbin.org/页面的 Chrome DevTools 控制台中执行，将被忽略，如果有的话，Cookie: 'xxx=yyy'浏览器将始终将 的值作为 cookie 发送。document.cookie
• 如果在不同的源上执行，则不会发送 cookie。

fetch('https://httpbin.org/cookies', {
  headers: {
    Cookie: 'xxx=yyy'
  }
}).then(response => response.json())
.then(data => console.log(JSON.stringify(data, null, 2)));

PS 您可以通过在 Chrome 浏览器中foo=bar打开https://httpbin.org/cookies/set/foo/bar来创建示例 cookie 。

有关详细信息，请参阅禁止的标头名称。

Answer 5

如果您在2019年阅读此内容，credentials: "same-origin"则为默认值。

fetch(url).then