通过 React.js 从 express.js 设置 cookie 不会设置。 （已设置 CORS，使用凭据：“include”）

Question

我正在尝试通过 React 前端从我的 express 后端设置一个 cookie。 cookie 包含在响应 header 中，但不会由浏览器设置。 我用 Chromium 和 Firefox 进行了测试，但没有成功。 但是，在 Postman 中，它可以完美地设置 cookie。

我尝试了在这里找到的所有建议，但没有一个对我有用。

快递cookie 选项：

exports.COOKIE_OPTIONS = {
    httpOnly: true,
    secure: false,
    signed: true,
    maxAge: eval(process.env.REFRESH_TOKEN_EXPIRY) * 100,
    sameSite: 'Lax'
}

快递cors设置：

const whitelist = process.env.WHITELISTED_DOMAINS

  ? process.env.WHITELISTED_DOMAINS.split(",")

  : []

const corsOptions = {

  origin: function (origin, callback) {

    if (!origin || whitelist.indexOf(origin) !== -1) {

      callback(null, true)

    } else {

      callback(new Error("Not allowed by CORS"))

    }

  },

  credentials: true,

}

app.use(cors(corsOptions))

使用WHITELISTED_DOMAINS = http://localhost:3000 in.env

用 cookie表达响应：

res.cookie("refreshToken", refreshToken, COOKIE_OPTIONS);
res.send({success: true, token});

反应我如何获取：

fetch(process.env.REACT_APP_API_ENDPOINT + "users/login", {
      method: "POST",
      credetials: "include",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({username, password})
});

其他一切正常，例如可以读取正文中的标记。

编辑

我还使用从这个答案中获得的以下选项进行了尝试：
饼干选项

exports.COOKIE_OPTIONS = {
    httpOnly: true,
    secure: true,
    signed: true,
    maxAge: eval(process.env.REFRESH_TOKEN_EXPIRY) * 100,
    SameSite: 'none'
}

响应 cookie

res.header('Access-Control-Allow-Credentials', true);
res.header("Access-Control-Allow-Headers", "X-Custom-Header");
res.cookie("refreshToken", newRefreshToken, COOKIE_OPTIONS);
res.send({success: true, token});

但它也行不通。 同样的结果。 Set-Cookie 存在于响应中，但不会被存储。

回复图片：
回复

无 cookies

Answer 1

问题是 sameSite 选项。 显然这与S ameSite 的处理方式不同。 将 SameSite 与大写字母“S”一起使用效果非常好。

如果有人能详细说明为什么会发生这种情况，我会很高兴。