无法将 cookie 从后端 express api 设置到前端 next(react) 应用程序 - 都在本地主机上

Question

目前我正在尝试在登录获取后将 JWT 令牌保存在客户端 cookie 中。在开发工具的 Network 选项卡中查看 set-cookie 响应时，我得到 This set cookie was blocked because its domain attribute was invalid with regards to the current host url.

这是我用来设置 cookie 的代码：

const token = user.generateVerificationToken();
const cookieOptions = {
    domain: 'http://dev.com:3000',
    // expires: new Date(Date.now() + 60000),
    maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
    httpOnly: true,
    secure: req.secure || req.headers['x-forwarded-proto'] === 'https',
};
  
res.cookie('jwt', token, cookieOptions);

这些是 cors 设置：

app.use( cors({credentials: true, origin: 'http://dev.com:3000'}) );

这是客户端上获取请求的样子：

let res = await fetch( 'http://api.dev.com:4000/login', {
        body: JSON.stringify(data), // login data
        headers: {
            'Content-Type': 'application/json'
        },
        method: 'POST',
        credentials: 'include'
    })

/etc/hosts:

127.0.0.1 dev.com
127.0.0.1 api.dev.com

有人可以帮忙吗？我找不到需要做些什么来解决这个问题。

Answer 1

这与 CORS 无关。相反，这是 cookie 的问题（跨域问题）。

您正在尝试为dev.com:3000 设置一个cookie，但API 位于api.dev.com:4000。它是跨域跨域的，因此它是无效的cookie。

如果我没记错的话，您不可能将 cookie 设置到不同的域。如果这样的事情是可能的，那将是一个严重的安全问题。

因此，您的问题有两种可能的解决方案：

• 如果您真的想为dev.com:3000 设置cookie，可行的解决方法是从您的API 中将cookie 值作为res 对象提供，然后在前端 ，你把res 变成一个cookie。您可以为此使用各种 JavaScript 的 API 或插件，例如 document.cookie、react-cookie、universal-cookie、js-cookie 等等。
• 如果您征求我的意见，只需将 api.dev.com:4000 转换为 api.dev.com:3000，或在同一个端口上运行它们。可以从同一域来源发送 cookie。
• 我注意到您正在使用 Next.js。您可以使用无服务器 API 从后端接收 cookie（您仍然必须通过 res 发送 cookie），然后使用无服务器 API 设置 cookie。由于无服务器 API 和前端位于同一 4000 端口，因此 cookie 应该是有效的。这样，您可以保留 cookie 的 httpOnly 属性。

如需进一步参考，请参阅我在this question 上的回答。