Cookies 使用Cookie获取API

我正在试用新的获取API，但在使用cookie时遇到问题。具体来说，成功登录后，未来的请求中会有一个Cookie头，但Fetch似乎会忽略该头，并且我所有使用Fetch进行的请求都是未经授权的

是因为Fetch还没有准备好，还是Fetch不能处理Cookies

---

我用Webpack构建我的应用程序。我还使用React Native中的Fetch，它没有相同的问题。

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

fetch（url{
凭据：“相同来源”
}).然后（…）.抓住（…）；

除了@Khanetor的回答，对于那些处理跨来源请求的人：

凭证：“包括”

JSON获取请求示例：

fetch(url, {
  method: 'GET',
  credentials: 'include'
})
  .then((response) => response.json())
  .then((json) => {
    console.log('Gotcha');
  }).catch((err) => {
    console.log(err);
});

---

我们刚刚解决了这个问题。只要两个f。残暴的日子

对我来说，秘诀在于：

我调用了POST/api/auth，看到cookies被成功接收

然后使用

凭据调用GET/api/users/：include'

并获得401 unauth，因为请求中没有发送cookie

---

关键是要为第一次调用

/api/auth

设置

凭证：“include'

。

如果您在2019年阅读此内容，则默认值为

凭证：“同源”

fetch(url).then

---

只需在这里为

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

这对我很有用：

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

---

---

如何设置cookie？cookie是从服务器端设置的。在我的例子中，我使用的是httponly cookies。@Khanetor我可以使用javascript使用document.cookie设置cookies，然后发送请求吗？有趣的事实：我想通过使用它来涵盖相同来源的获取和跨来源的获取两种情况，但我不能，但它确实适用于跨来源请求。=）@ospider我发现只要在

document.cookie

中设置值就足以将其包含在请求中。同源不再有效，包含可以（请参见@Jerry的回答）：@jpic:'include'仅适用于跨源请求，但不适用于同源请求。官方文档：如果httponly Cookie在js中可以通过fetch读取，那么使用httponly Cookie的原因是什么？我相信

同源性
（仍然有效）意味着更多的标题将得到尊重（Cookie等），但您的代码对响应的访问将受到限制。@JohnBalvinAriasThx。正如我后来理解的，拥有cookie Http只意味着它不能被
document.cookie
读取，但仍然可以用于ajax或获取请求。我正是有你的问题。会话cookie永远不会在获取数据请求时发送。那么401。我试过Axios和Fetch。同样的结果。2种可能性：登录帖子不存储收到的cookie，或者下面的GET数据不发送存储的cookiecookie@Rhubarb65，要赢得这场比赛，你应该指定
凭证：“include'
作为第一次
POST/api/auth
Well干杯。你的回答意味着我只用了一天的暴力我欠你一大杯啤酒。在过去的3个小时里，我一直在努力解决这个问题。谢谢x1000。还有，别做我。确保获取URL为127.0.0.1而不是localhost，否则将不会设置Cookie。但请注意，并非所有人都在使用充分更新的浏览器。我遇到这个问题是因为我自己的Firefox版本（60.x，Debian Stretch中最新的版本）默认情况下没有设置它。“cors.SupportsCredentials=true；”救了我一天，谢谢。