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_DOMAINSANCTUM_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。