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。暴力的日子

对我来说，秘密在于：

我打电话给POST / api / auth，并看到成功接收了cookie。
然后使用credentials: 'include'调用GET / api / users /并获得401注销，因为没有随请求发送cookie。

密钥也要为第一个/ api / auth调用设置credentials: 'include'。

Answer 4

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

fetch(url).then

Answer 5

只需为.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);

Answer 6

这对我有用：

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)));
    };
  }

Answer 7

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

使用Cookie获取API

7 个答案: