从不同域调用身份验证API不会设置Cookie

Question

我正在运行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

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

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

cookie是由Postman设置的，因此我认为后端没有错。

有什么想法吗？我们已经待了好几天了，却无法解决问题。

我正在运行Flask API，如果用户名和密码正确，它将设置cookie（JWT）。我从https://example.ngrok.io请求API，并且该API位于https://myAPIDomain.com。 ...

Answer 1