React 应用程序会丢弃 cookie，而纯 HTML/JavaScript 中的相同代码却不会丢弃

Question

React 应用程序执行以下 CORS 获取：

const response = await fetch("http://localhost:3000/users/sign_in", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    credentials: "include",
  },
  body: JSON.stringify({ user: { email, password } }),
});

服务器的响应包括以下内容：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin: http://localhost:3001
Access-Control-Expose-Headers:
Access-Control-Max-Age: 7200
Cache-Control: max-age=0, private, must-revalidate
Content-Type: application/json; charset=utf-8
Etag: W/"36cb9f6def08029b9c6bff3c14a98017"
Referrer-Policy: strict-origin-when-cross-origin
Server-Timing: sql.active_record;dur=23.10, start_processing.action_controller;dur=0.27, instantiation.active_record;dur=6.83, process_action.action_controller;dur=274.12
Set-Cookie: CSRF-TOKEN=UrU9vCDa-ni5ZWXUOIgaEEeGL4izouMAEFpa3oJWTH0dAUOIUH5yZDEogo9opprqe6r3YEoMxl0w4aT18zvIMQ; path=/; secure; SameSite=None
Set-Cookie: _session_id=4Aj5KMcZZG0Bn7EL4hhfdZHt0rw6WX46tpA9Lb8uE09apmDiALhiSAkGeUDIZuNvRJ9yTcUEbhydbFIgKYOkNPcMXrz7wItdWWjJSVsy%2Bfrp43uTxALrEsxVI%2BrvHrqfUTkM2FyP9MhqI8X1GPvbuIge%2FF4Acapi%2FuyPrmOqn9MMNqwqyJA%2Fo8GjtaU7vb4GzhDVxWOUQuVmKHm%2BCw2wGB4GsH%2Bv0QO1C%2BOYZE2PTVfeuONCWaXchyY21C0MVFnYYsZ2eB48c2

等等。第二个 cookie 已被截断，但两者具有相同的 cookie 参数。

当我在 Chrome 开发者工具中查看 cookie 时，它们不存在。

当我对同一个服务器、同一个浏览器、使用相同的 CORS 配置执行与上面完全相同的获取代码时，但我在普通 JavaScript 中执行此操作（没有 React），则 cookie 已设置，并且可以发送在后续的获取请求中。

React 做了什么导致 cookie 无法设置？在这两种情况下，网络上双向流动的内容（包括预取）完全相同。失败案例和工作案例之间的唯一区别是 React 的使用。

我预计来自 React 的成功 CORS 请求可以设置浏览器 cookie。这些 cookie 是

SameSite=None

、

secure=true

，因为这是 Chrome 人员推荐的 cookie，这些 cookie 将包含在后续的获取请求中。请注意，请求确实成功，并且 cookie 已返回。但是，仅对于 React 情况，它们被丢弃了。

Answer 1

啊啊，我瞎了。我在 html/javascript 应用程序中使用的代码有凭据：“include”在正确的位置。正如有人观察到的那样，来自反应应用程序的上述代码的凭据：“include”位于错误的位置。哎呀。