私のブラウザは、React アプリの My Go サーバーによって設定された Cookie を保存しないのはなぜですか?

ブラウザが Cookie の保存を拒否する

問題ステートメント

Go サーバーと統合された React アプリケーションでは、サーバーは、ログイン応答。ただし、ネットワーク タブの応答で Cookie が返されたにもかかわらず、Cookie はブラウザによって保存されません。

Exploration

提供されたコード スニペットは次のことを示しています。

• クロスオリジンリソース共有 (CORS) は許可するように構成されていますcredentials.

• http.SetCookie() 関数は、次の設定で応答に Cookie を追加するために使用されます:

  • 名前: "accessToken"
  • 値: トークン
  • 最大存続期間: として指定integer
  • パス: "/api"
  • HTTP のみ: true
  • SameSite: LaxMode

からのスクリーンショット[ネットワーク] タブには、応答で Cookie が実際に送り返されていることを示します。 headers.

解決策

この問題を解決する鍵は、Fetch API の資格情報フラグにあります。応答に Cookie が含まれることを予期するフェッチ リクエストを行う場合は、資格情報を「include」に設定することが必須です。

編集コード:

fetch(`${url}/login`, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    credentials: "include", // This line has been added
    body: JSON.stringify({
        email: userDetails.email,
        password: userDetails.password,
    }),
}).then((response) => { ...

資格情報を「include」に設定することで、ブラウザは、応答に含まれる Cookie を受け入れて保存する必要があることを理解します。この構成により、ブラウザーが Cookie を正しく保存し、後続のリクエストで使用できるようになります。

以上が私のブラウザは、React アプリの My Go サーバーによって設定された Cookie を保存しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。