无法将cookie从后端express api设置到前端next(react)应用程序-两者都在localhost上

Question

目前，我正在尝试在获取登录信息后将JWT令牌保存在客户端cookie中。当查看开发工具的网络选项卡中的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'}) );

下面是客户机上的fetch请求：

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无关。相反，这是cookies的问题(跨域问题)。

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

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

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

• 如果您确实想为dev.com:3000设置cookie，解决方法是将Cookie值作为res对象从您的API中提供，然后在前端中使用，您可以将该res转换为cookie。您可以为此使用各种JavaScript或插件，如document.cookie、react-cookie、universal-cookie、js-cookie和许多您询问我意见的more.
• If，只需将该转换为api.dev.com:3000，或在同一端口中运行它们。可以从origin.
• I注意到您正在使用Next.js的同一个域发送cookies 。您可以使用无服务器接口从您的后台接收cookie (您仍然需要通过res发送cookie )，然后使用无服务器API设置cookie。由于无服务器接口和前端位于同一4000端口，因此cookie应该是有效的。这样，您就可以保留cookie的httpOnly属性。

有关更多参考，请参阅我在this question上的回答。