blocks|key|4443598|text|默认情况下，Fetch不使用cookie。要启用cookie，请使用do+this|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4443599|fetch(url,+{
++credentials:+"same-origin"
}).then(...).catch(...);|code-block|syntax|javascript|4443600|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters^0|Y|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Fetch does not use cookie by default. To enable cookie, <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters" rel="noreferrer">do this</a>:
<pre class="lang-js prettyprint-override"><code>fetch(url, {
 credentials: &quot;same-origin&quot;
}).then(...).catch(...);
</code></pre>

blocks|key|4443800|text|除了@Khanetor的回答之外，对于那些正在处理跨域请求的人来说：credentials:+'include'|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4443801|JSON+fetch请求示例：|4443802|fetch(url,+{
++method:+'GET',
++credentials:+'include'
})
++.then((response)+=>+response.json())
++.then((json)+=>+{
++++console.log('Gotcha');
++}).catch((err)+=>+{
++++console.log(err);
});|code-block|syntax|javascript|4443803|https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials|4443804|entityMap|0|LINK|mutability|MUTABLE|url^0|Y|M|0|0|0|0|1W|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|N]]]]

In addition to @Khanetor's answer, for those who are working with cross-origin requests: <code>credentials: 'include'</code>

Sample JSON fetch request:

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

<a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials">https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials</a>

blocks|key|4443659|text|如果你在2019年阅读这篇文章，credentials:+"same-origin"是默认值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4443660|fetch(url).then|code-block|syntax|javascript|4443661|entityMap^0|G|Q|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you are reading this in 2019, <code>credentials: "same-origin"</code> is the default value.

<pre><code>fetch(url).then
</code></pre>

blocks|key|4443671|text|在这里为.net+webapi2用户添加正确的答案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4443672|如果您使用cors是因为您的客户端站点是从与webapi不同的地址提供服务的，那么您还需要在服务器端配置中包含SupportsCredentials=true。|4443673|++++++++//+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);|code-block|syntax|javascript|4443674|entityMap^0|4|4|9|7|0|5|4|M|6|1J|O|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

Just adding to the correct answers here for <code>.net</code> <code>webapi2</code> users.

If you are using <code>cors</code> because your client site is served from a different address as your <code>webapi</code> then you need to also include <code>SupportsCredentials=true</code> on the server side configuration.

<pre><code> // 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);
</code></pre>

blocks|key|4443676|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4443677|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+"+%2B+cookies.get('remember_user_token');
}
return+headers;
}|code-block|syntax|javascript|4443678|然后建立您的呼叫：|4443679|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)));
++++};
++}|4443680|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This works for me:

<pre><code>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;
}
</code></pre>

Then build your call:

<pre><code>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 =&gt; response.json())
 .then(json =&gt; dispatch(receiveTests(json)));
 };
 }
</code></pre>

blocks|key|4443705|text|我的问题是我的cookie被设置在一个特定的URL路径上(例如，/auth)，但是我被fetch到了一个不同的路径。我需要将cookie的path设置为/。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4443706|entityMap^0|W|5|17|5|1X|4|24|1|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

My issue was my cookie was set on a specific URL path (e.g., <code>/auth</code>), but I was <code>fetch</code>ing to a different path. I needed to set my cookie's <code>path</code> to <code>/</code>.

I am trying out the new Fetch API but is having trouble with Cookies. Specifically, after a successful login, there is a Cookie header in future requests, but Fetch seems to ignore that headers, and all my requests made with Fetch is unauthorized.

Is it because Fetch is still not ready or Fetch does not work with Cookies?

I build my app with Webpack. I also use Fetch in React Native, which does not have the same issue.

Fetch API with Cookie

React Native

服务器

JSON

我正在试用新的Fetch API，但在使用Cookie时遇到了问题。具体地说，成功登录后，在以后的请求中会有一个Cookie标头，但Fetch似乎会忽略这些标头，而且我使用Fetch发出的所有请求都是未经授权的。是因为Fetch仍然没有准备好，还是Fetch不能与Cookie一起工作？我和Webpack一起构建我的应用...

问使用Cookie获取API
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Cookie获取APIEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Cookie获取API
EN