从不同域调用身份验证 API 不会设置 cookie答案

【问题标题】：Calling authentication API from different domain won't set cookies从不同域调用身份验证 API 不会设置 cookie
【发布时间】：2020-06-23 07:57:22
【问题描述】：

如果用户名和密码正确，我正在运行一个 Flask API，它会设置 cookie (JWT)。

我向https://example.ngrok.io 请求API，API 位于https://myAPIDomain.com。

Set-cookie 标头存在于响应标头中，但未设置任何 cookie（查看 Chrome 应用程序 cookie 存储）。

这是后端配置：

response.headers['Access-Control-Allow-Origin'] = request.headers['Origin']
response.headers.add('Access-Control-Allow-Credentials', 'true')
response.headers.add('Access-Control-Allow-Headers', 'Content-Type')
response.headers.add('Access-Control-Allow-Headers', 'cache-control')
response.headers.add('Access-Control-Allow-Headers', 'X-Requested-With')
response.headers.add('Access-Control-Allow-Headers', 'Authorization')
response.headers.add('Access-Control-Allow-Headers', 'set-cookie')
response.headers.add('Access-Control-Allow-Headers', 'user-agent')
response.headers.add('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE')

在后端设置 cookie： resp.headers.add("set-cookie",'cookieKey:cookieValue; Domain=myAPIDomain.com; Max-Age=3600; Secure; Path=/; SameSite=None')

还尝试不指定域： resp.headers.add("set-cookie",'cookieKey:cookieValue; Domain; Max-Age=3600; Secure; Path=/; SameSite=None')

这些解决方案都不起作用。

这是 Chrome 中响应标头的图片： https://i.imgur.com/D3cq16Z.jpg

API 应该设置的 cookie 用于未来的 API 端点身份验证。所以当我发送另一个请求时：

var myHeaders2 = new Headers();
myHeaders2.append("Content-Type", "application/json");

var requestOptions2 = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow',
  credentials: 'include'
};

fetch("https://myAPIDomain.com/endpointWhichRequiresCookies", requestOptions2)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

但是没有发送 cookie（显然是因为 chrome 没有设置 cookie）。这是后端收到的内容：https://codebeautify.org/online-json-editor/cb81fb64

我知道一种解决方法是使用 cookie 回复前端作为 JSON 回复，前端将 cookie 作为不同的标头发送（因为您不能从前端发送“cookie”标头），但这不是我们的最佳解决方案。

我们从 ngrok 调用 API 的唯一原因是我们正在进行 localhost 测试。

cookie 是用 Postman 设置的，所以我认为后端没有问题。

有什么想法吗？我们已经为此困扰了几天，但无法解决问题。

【问题讨论】：

我无法从您的描述中发现明显的问题，但我们有更深入的调试指南可以帮助您隔离问题：chromium.org/updates/same-site/test-debug
我禁用了“SameSite 默认 cookie”和“没有 SameSite 的 Cookie 必须是安全的”并尝试再次进行身份验证，但没有成功。我可以私下将 ngrok 链接发送给您，以便您自己进行一些测试。请记住，Chrome 并没有警告我做错了什么。 cookie 只是没有以某种方式设置
这是来自 Chrome 响应的请求 cookie：i.imgur.com/5Uk0GIp.png 如您所见，没有任何 cookie 被过滤掉，但不知何故 Google chrome 忽略了它们

标签： google-chrome flask cookies flask-restful

【解决方案1】：

找到了解决办法！

我们正在发送两个请求：

使用用户名和密码登录 Post 请求（使用 Fetch POST）
请求从后端获取信息（使用 Fetch GET） - 后端将使用在请求 #1 中设置的 cookie 来验证请求。

问题是我们没有发送带有凭据的请求 #1：“include”，因为我们认为第一个请求不需要它。我们的第二个请求总是有凭据：“包含”，但如果您没有在两个请求中设置凭据：“包含”，Chrome 显然会忽略 cookie。

【讨论】：