Cors - 此 set-cookie 域属性对于当前主机 url 无效

Question

我有一个节点后端，它应该允许来自在 localhost:3000 上运行的前端应用程序的跨源请求。因此，我已将 cors 策略限制在我的域中。import csrf from 'csurf';app.use(  cors({    origin: 'http://localhost:3000',    credentials: true  }));const csrfProtection = csrf({  cookie: {    maxAge: 900,    domain: 'http://localhost:3000'  }})router.get('/csrfToken', csrfProtection, async (req, res, next) => {  res.json({ token: req.csrfToken() });});当我现在向我的服务器端点（在 localhost:5000 上运行）发出请求时，它会返回以下错误，即无法设置 cookie。  fetch('http://localhost:5000/csrfToken', {      method: 'GET',      credentials: 'include' })

Answer 1

这与 CORS 无关。这就是 cookie 的工作原理。

标头中的域set-cookie表示http://localhost:3000，但请求是针对http://localhost:5000.

那是不同的来源，无效的 cookie 也是如此。

来自一个来源的标头不可能为set-cookie不同的来源设置 cookie。http://localhost:5000只能为http://localhost:5000.

如果你真的想设置一个cookie，:3000那么解决方法是通过cookie以外的其他格式提供数据（例如在请求正文中），然后让客户端JS使用文档http://localhost:3000设置cookie 。饼干 API。

如果您想设置 cookie :5000（这似乎更有可能），请在set-cookie标题中获取端口号。

const csrfProtection = csrf({

  cookie: {

    maxAge: 900,

    domain: 'http://localhost:5000'

  }

})

Answer 2

如果有人从 Laravel (sanctum) 登陆这里，可以在他们的本地服务器上试试这个：-

//.env file. Try removing :port from SESSION_DOMAIN

SANCTUM_STATEFUL_DOMAINS="127.0.0.1:8000"

SESSION_DOMAIN="127.0.0.1"

Answer 3

我今天也遇到了这个问题。我使用的chrome浏览器版本高于80。chrome添加了一个新属性“samesite”来保护来自v51的csrf。chrome v80+ 默认限制跨站设置cookie，使cookie无效。 控制台警告：在http://XXX.XXX.XXX.XXXX/处设置了与跨站资源关联的 cookie，但未设置该SameSite属性。SameSite=None它已被阻止，因为 Chrome 现在仅在使用和设置时才提供带有跨站点请求的 cookie Secure。