未在 Azure 的 React 客户端上设置 http-only cookie

Question

我在这里看到了几个类似的问题，但似乎没有一个解决方案或特定设置与我的完全匹配。

我有一个 React 客户端，它通过 apollo 调用后端框架 Web API，它设置了一个仅限 http 的 cookie，我希望在所有后续请求中将其发回。后端服务配置为接受客户端域作为 CORS 来源和本地以及部署到测试服务器时，这一切正常。

我现在已将客户端和后端服务部署到单独的 Azure 应用服务，并且 cookie“似乎”没有在客户端上设置。

在初始响应标头中，我可以看到在 set-cookie 中设置的 cookie，但它不会包含在后续请求中，也不会出现在 chrome 工具的应用程序选项卡中。

我的 Apollo 调用指定 withCredentials: true

知道这可能是什么原因吗？

编辑。 从初始 API 请求返回的响应标头是：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://my-app-service.azurewebsites.net
Cache-Control: no-cache
Content-Encoding: gzip
Content-Length: 256
Content-Type: application/json; charset=utf-8
Date: Fri, 29 Oct 2021 12:04:27 GMT
Expires: -1
Pragma: no-cache
Server: Microsoft-IIS/10.0
Set-Cookie: {Cookie-Name}={JWT-Token}; expires=Fri, 29-Oct-2021 12:24:27 
GMT; path=/; HttpOnly
Vary: Accept-Encoding
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET

Answer 1

要将仅 http 的 cookie 传递给 chrome 浏览器中所有选项卡上的所有后续请求：

后端（服务器）：

• 将 HTTP 标头 Access-Control-Allow-Credentials 值设置为 true。此外，请确保将 HTTP 标头 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 设置为显式域并且不要使用通配符 *。

• Chrome 和 Firefox 推荐的 Cookie 设置，SameSite=None，Secure 甚至是必需的。见MDN。

前端（客户端）：

• 将XMLHttpRequest.withCredentials 标志设置为true，这可以根据使用的请求-响应库以不同的方式实现：

• jQuery 1.5.1xhrFields: {withCredentials: true}

• ES6 fetch()credentials: 'include'

• axios:withCredentials: true

• 用这些占位符值正确替换 sn-p 中的实际 {Cookie-Name} 和 {JWT-Token} 值。