269

我正在尝试新的 Fetch API，但遇到了 Cookie 问题。具体来说，成功登录后，以后的请求中有一个 Cookie 标头，但 Fetch 似乎忽略了该标头，并且我使用 Fetch 发出的所有请求都是未经授权的。

是因为 Fetch 还没有准备好还是 Fetch 不能与 Cookie 一起使用？

我使用 Webpack 构建我的应用程序。我也在 React Native 中使用了 Fetch，它没有同样的问题。

4

9 回答 9

335

Fetch 默认不使用 cookie。要启用 cookie，请执行以下操作：

fetch(url, {
  credentials: "same-origin"
}).then(...).catch(...);
于 2016-01-04T13:34:23.460 回答
240

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

于 2016-08-13T18:38:27.717 回答
71

刚刚解决了。只有两个f。蛮力的日子

对我来说，秘诀在于：

  1. 我调用了 POST /api/auth 并看到 cookie 已成功接收。

  2. 然后使用 GET /api/users/ 调用credentials: 'include'并获得 401 unauth，因为没有随请求发送 cookie。

KEY 也是credentials: 'include'为第一次/api/auth通话设置的。

于 2018-08-07T11:47:56.240 回答
26

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

fetch(url).then
于 2019-06-13T08:39:58.113 回答
4

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

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

  • 在https://httpbin.org/页面的 Chrome DevTools 控制台中执行，将被忽略，如果有 cookie 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 。

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

于 2021-09-01T14:22:21.187 回答
4

.net webapi2只需在此处为用户添加正确答案。

如果您使用cors的是因为您的客户端站点与您的地址不同，webapi那么您还需要包括SupportsCredentials=true在服务器端配置中。

        // Access-Control-Allow-Origin
        // https://docs.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);
于 2019-08-27T16:57:50.290 回答
0

如果在修复凭据后它仍然对您不起作用。

我也在使用：

  credentials: "same-origin"

它曾经可以工作，然后突然就不行了，在挖掘了很多之后我意识到我已经将我的网站网址更改http://192.168.1.100为在局域网中对其进行测试，这就是用于发送请求的网址，即使我上http://localhost:3000。

所以总而言之，请确保页面的域与获取 url 的域匹配。

于 2022-01-27T08:49:22.463 回答
0

我的问题是我的 cookie 设置在特定的 URL 路径（例如，/auth）上，但我正在fetch使用不同的路径。我需要将我的 cookie 设置path为/.

于 2021-07-02T19:46:56.967 回答
-1

这对我有用：

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)));
    };
  }
于 2020-05-06T21:54:46.553 回答