Cookieを使用したFetch API

新しいFetch APIを試していますが、Cookieに問題があります。具体的には、ログインが成功した後、将来のリクエストにCookieヘッダーが含まれますが、Fetchはそのヘッダーを無視しているようで、Fetchで行われたすべてのリクエストは不正です。

Fetchがまだ準備ができていないためか、FetchがCookieで機能しないためですか？

私はアプリをWebpackでビルドします。同じ問題のないReact NativeでもFetchを使用しています。

FetchはデフォルトでCookieを使用しません。Cookieを有効にするには、次のようにします。

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

@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

解決しました。2つだけf。残忍な日々

私にとっての秘密は以下の通りでした：

1. POST / api / authを呼び出し、Cookieが正常に受信されたことを確認しました。

2. 次に、GET / api / users /を呼び出してcredentials: 'include'401 unauthを取得しました。リクエストでCookieが送信されなかったためです。

キーはcredentials: 'include'最初の/api/auth呼び出しにも設定することです。

2019年にこれを読んでいる場合credentials: "same-origin"は、デフォルト値です。

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