调试即使使用 CORS 标头和 withCredentials=true 也无法设置 cookie 的 CORS 请求

Question

有很多关于 StackOverflow 的用户提出 CORS 请求但未正确设置 cookie 的问题。我遇到了同样的问题，但我想知道 Chrome 或其他浏览器是否提供了一种方法来诊断和了解未设置 cookie 的原因。

我发现了各种可能导致此问题的原因：缺少 CORS 标头、缺少 withCredentails=true、跨越 https 安全边界的情况、cookie 上的某些标志...我想了解 Chrome 正在做什么，而不仅仅是猜测为什么它不起作用。

---

这是我的具体问题，但实际上我正在寻找一个不仅仅是解决问题的过程。

域创建请求：

注意，Credentails = true。

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState === XMLHttpRequest.DONE) {
    callback(xmlhttp);
  }
};
xmlhttp.open('POST', url, true);
xmlhttp.withCredentials = true;
xmlhttp.setRequestHeader('Content-Type', 'application/json');
xmlhttp.send(payload);

请求：

请注意，Chrome 不会为请求显示任何 Set-Cookie 标头。

同一请求的卷曲：

但如果我右键单击 > 复制 > cUrl 并在此处执行，原始标题包括 Set-Cookie：

curl 'http://satellite:6988/medic/login' -H 'Referer: http://upstream:5988/medic/login?redirect=http%3A%2F%2Fupstream%3A5988%2Fmedic%2F_design%2Fmedic%2F_rewrite%2F%23%2Fmessages%2Fcontact%3A13863168-be61-418a-aea1-1b19b9a5af39' -H 'Origin: http://upstream:5988' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36' -H 'Content-Type: text/plain;charset=UTF-8' --data-binary '{"user":"worker","password":"dSNH1sv2jzdB"}' --compressed -v
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to satellite (127.0.0.1) port 6988 (#0)
> POST /medic/login HTTP/1.1
> Host: satellite:6988
> Accept: */*
> Accept-Encoding: deflate, gzip
> Referer: http://upstream:5988/medic/login?redirect=http%3A%2F%2Fupstream%3A5988%2Fmedic%2F_design%2Fmedic%2F_rewrite%2F%23%2Fmessages%2Fcontact%3A13863168-be61-418a-aea1-1b19b9a5af39
> Origin: http://upstream:5988
> User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
> Content-Type: text/plain;charset=UTF-8
> Content-Length: 43
> 
* upload completely sent off: 43 out of 43 bytes
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Access-Control-Allow-Origin: http://upstream:5988
< Vary: Origin, Accept-Encoding
< Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS, HEAD, DELETE
< Access-Control-Allow-Headers: accept, authorization, content-type, origin, referer, x-csrf-token
< Access-Control-Allow-Credentials: true
< Set-Cookie: AuthSession=d29ya2VyOjVDMDdEMjgwOj06hJxoYrYGtUxNa3ImYd1AZ7Vw; Path=/
< Set-Cookie: userCtx=%7B%22name%22%3A%22worker%22%2C%22roles%22%3A%5B%22chv%22%5D%7D; Max-Age=31536000; Path=/; Expires=Thu, 05 Dec 2019 13:28:32 GMT
< Set-Cookie: satelliteServer=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT
< Content-Type: application/json; charset=utf-8
< Content-Length: 16
< ETag: W/"10-oV4hJxRVSENxc/wX8+mA4/Pe4tA"
< Date: Wed, 05 Dec 2018 13:28:32 GMT
< Connection: keep-alive
< 
* Connection #0 to host satellite left intact
{"success":true}

Answer 1

Chrome 控制台有助于了解 CORS 标头的问题。因为它会在请求被完全阻塞时写入清晰的描述性标头。

对于我的特定场景，我使用包含 cookie 相关事件的 chrome://net-internals/#events 来了解 Set-Cookie 标头已从开发人员工具中省略，但正在被提供、接收和正确设置。

我的问题是我在设置 cookie 后对请求使用 fetch 时设置了 options.credentials=true，而不是必需的 options.credentials='include'。