使用 cookie 将原点设置为“*”时出现 CORS 原点问题

Question

我正在开发一个带有 nodejs/express 后端的 reactjs 前端应用程序。 之前，反应方面，我通过地址localhost:5000 访问我的nodejs，但由于我想从我的移动设备上尝试它，我天真地将localhost 更改为我的@ip 192.168.X.X，正如标题所说，它不起作用。

我正在分享一个我尝试使用 login 功能的示例，因为服务器应该发回一个 cookie。

前端我用axios：

const result = await axios({
                method:'post',
                url:'http://192.168.X.X:5000/api/user/login',
                data:{
                    "emailLogin":login,
                    "password":password
                },
                withCredentials:true,
                headers: { crossDomain: true, 'Content-Type': 'application/json' },
            });

后端我试过这个：

const corsConfig = {
    credentials:true,
    origin:true,
}
app.use(cors(corsConfig));

第一个配置给我发回一个 200 个 http 代码，但没有任何 cookie。

我也试过这个作为后端：

const corsConfig = {
    credentials:true,
    origin:"*",
}
app.use(cors(corsConfig));

这一次，在前端，我得到了众所周知的 Access to XMLHttpRequest 错误。

我在 stackoverflow 的某处读到，当 origin 设置为 '*' credential 应该设置为 false 。

我也很想拥有一份关于 cors、react 和 nodejs 的完整文档，但老实说，我找不到任何可以解决我的问题的文档。

总结一下我的问题：

我的 reactjs 前端将部署在多个地址未知的设备上，它应该向 nodejs 后端发送一个 POST 请求，该后端将发回一个 cookie。

Answer 1

我遇到了同样的问题。当我的后端是 myserver.com 而前端是 myclient.com

后端配置：

1. 使用确切的来源而不是“*”启用 CORS

   app.use(cors({
    origin: [
      'http://localhost:4200',
      'https://dev.myclient.com',
      'https://staging.myclient.com',
      'https://www.myclient.com',
    ],
    credentials: true
   }))
   

2. 使用 SameSite="None" 设置 Cookie 并使用 HTTPS 启用后端。

   res.cookie('access_token', token, {
    expires: new Date(Date.now() + (3600 * 1000 * 24 * 180 * 1)), //second min hour days year
    secure: true, // set to true - samesite none only works with https
    httpOnly: true, // backend only
    sameSite: 'none'
   });
   

由于您的前端和后端位于不同的域中。您必须将 sameSite 属性指定为“无”

您的后端必须启用 HTTPS，因为 samSite='none' 仅适用于 HTTPS，否则您的 cookie 将被浏览器阻止。检查 cookie link 中的 samesite 属性。

为您的后端 myserver.com 启用 SSL 证书