如何在HTML和API调用具有不同域的站点中使用cookie？

Question

我在一个静态服务器（碰巧是Amazon S3)上托管了一个单页应用程序网站，所以它是从我的应用程序的URL提供的，比如“example.com”。因此，该网站位于“https://example.com”。这个站点使用了使用JavaScript的fetch（）调用进行的API调用来执行站点的功能。因为example.com指向一个静态服务器，所以API调用会转到一个不同的域，我们称之为“xyz.execute-api.cloudhost.com”（它碰巧位于Amazon的API网关后面）。

我想使用cookie来管理用户会话。也就是说，我希望一个API调用在响应上返回一个Set-Cookie头，这将在浏览器上存储一个cookie，我希望其他一些API调用在请求上传递一个cookie头，然后可以在API中进行验证。cookie将始终来自API并返回到API（而不是页面的站点，因为页面本身托管在静态服务器上）。我希望cookie在会话之间保存（使用一些过期生存期，并理解浏览器可能会由于空间限制或用户操作而清除它）。

但这很难做到。首先，我的API调用都是到一个单独的域，所以我必须使用CORS来授权调用。当我使用CORS时，服务器必须在访问控制允许头列表中包含“cookie”，否则将不会返回它。此外，当我使用JavaScript的fetch（）API进行调用时，我需要指定包括如下凭证：

获取（url,{method：“post”,credentials：“include”}）

...否则cookie将不会被发送。返回cookie的API调用不需要接收cookie，但必须为此指定凭据：“include”，否则浏览器将忽略Set-Cookie响应头。

我还需要正确配置cookie本身。不同的API调用有不同的路径，所以我需要在Set-Cookie头中指定path=/。我更愿意设置samesite=strict、secure、httponly和max-age的值，但如果需要，我愿意灵活地设置。

就我所知。我仍然不能以跨平台的方式将我的Cookie放置（与Set-Cookie一起）并返回到服务器（以Cookie的形式）。由于页面域与API域不同，我可能需要指定samesite=none，但是如果我这样做了，最近的标准更改可能还需要设置secure（这很好）。即便如此，我也不能让所有的主要浏览器返回cookie。我还希望用相同的键设置一个新的cookie会取代现有的cookie，但我也不能这样做--当它返回时，我会看到两个cookie。

在这种情况下使用cookie的正确方法是什么？

Answer 1

正如您特别指出的那样，您希望从一个单独的站点向API站点发起这些请求，这意味着它们本质上是跨站点或第三方请求，因此cookie必须标记为samesite=none；安全。

如果要使用samesite=strict或samesite=lax，则需要从SPA内部管理cookie。这可能更好，因为它允许您在那里存储会话标识符或令牌，然后将其作为单独的字段或头部传递给API。这样，您的API就不依赖于cookie，这可能更可取。