当 CORS Access-Control-Allow-Origin 设置为 (*) 时设置 cookie答案

【问题标题】：Setting cookies when CORS Access-Control-Allow-Origin is set to (*)当 CORS Access-Control-Allow-Origin 设置为 (*) 时设置 cookie
【发布时间】：2019-11-20 05:44:52
【问题描述】：

我正在使用 Node.js 和 Express 构建一个 API，目的是让用户通过 API 调用访问它，并充当我的 Web 应用程序 (React.js) 的 RESTFUL 后端。

出于这个原因，我将 CORS Access-Control-Allow-Origin 设置为通配符 (*)，因为它应该可以从外部源访问。

目前，API 运行在 localhost:8000，web-app 运行在 localhost:3000。

现在，我想在访问我的 /login 端点时设置一个 cookie。 cookie 不用于身份验证，所以我不担心 CSRF。

我正在这样设置 cookie：

res.cookie('token', 'value', {httpOnly:true});

当我使用 Postman 时，cookie 设置没有问题，但是当我尝试通过浏览器使用我的 webapp 访问它时，cookie 没有设置。

在阅读了几篇关于 Stack Overflow 的帖子后，我了解到在从我的 Web 应用程序执行 fetch 操作时需要设置 credentials: include。

问题在于，如果 Access-Control-Allow-Origin 设置为 (*)，则浏览器不允许这样做。

有没有办法在这些情况下在浏览器上设置cookie？

谢谢

【问题讨论】：

标签： node.js api cookies browser cors

【解决方案1】：

https://security.stackexchange.com/questions/198714/access-control-allow-origin-wildcard-doesnt-allow-sending-session-cookies 在 stackexchange 上查看这个答案以了解这背后的一些原因，但基本上不，你不能。

如果您需要带有凭据的 api，您还应该知道可以获取这些凭据的所有可能来源。将 allow-origin 设置为您的 localhost 和/或开发服务器，以及您的最终生产地址，如下所述。

我假设您在 NodeJS 服务器上使用 cors 包。

它也应该被配置为接受 cookie。在 Express 服务器的情况下，它看起来像这样。

app.use(cors({
    origin:["http://localhost:3000"],
    credentials:true
}));

此外，正如您所说的那样，您会将凭据与任何 UI 端调用一起发送到 API。

【讨论】：

感谢您的回复，但是我的问题是我需要我的来源是通配符 (*)，这在设置凭据时是不允许的。
developer.mozilla.org/en-US/docs/Web/HTTP/… 请参阅 MDN，了解为什么在使用凭据时必须指定来源并且不能使用通配符

【解决方案2】：

我通过这样做解决了这个问题（我正在使用 NPM 的 cors 包）：

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

根据docs：

origin：配置 Access-Control-Allow-Origin CORS 标头。可能的值：
Boolean - set origin to true to reflect the request origin, as defined by req.header('Origin'), or set it to false to disable CORS.

这使得 cors 将基本上接受基于请求标头的任何来源，同时还允许设置 cookie。

【讨论】：