服务端创建的Cookie未在客户端存储的问题咨询与解决

先把你提供的服务器响应贴出来，方便分析：

HTTP/1.1 200 OK
Date: Fri, 23 Mar 2018 12:17:57 GMT
Access-Control-Allow-Origin: http://localhost:8888
Vary: Origin
Access-Control-Allow-Credentials: true
Set-Cookie: key=value;Version=1
Content-Type: application/json
Content-Length: 276

你遇到的情况是跨域Cookie配置的典型坑——明明后端返回了Set-Cookie，但浏览器既不存储也不在后续请求里携带，哪怕加了httpOnly也没用。其实浏览器存储Cookie是默认行为，但跨域场景下有严格的规则要满足，你目前的配置缺了几个关键项，我给你一步步拆解解决方案：

1. 给Cookie明确指定Domain和Path #

浏览器默认会根据请求的域名和路径生成Cookie的作用域，但跨域场景下这种默认行为很容易匹配失败。比如你前端在http://localhost:8888，后端如果也是localhost服务，必须明确把Domain设为localhost，Path设为/（确保所有路径都能匹配到这个Cookie）。修改后的Set-Cookie应该是：

Set-Cookie: key=value;Version=1;Domain=localhost;Path=/

如果后端是其他域名，就得把Domain设为前端和后端共有的父域，不然浏览器会认为Cookie不属于当前页面的域名，直接忽略。

2. 确保请求允许携带凭据 #

虽然你后端设置了Access-Control-Allow-Credentials: true，但前端发起请求时必须明确开启“携带凭据”的选项：

• 用fetch的话，要添加credentials: 'include'参数；
• 用XMLHttpRequest的话，要设置xhr.withCredentials = true；
• 如果是页面跳转或者资源加载（比如<script>、<img>），只要是同站点或者符合跨域凭据规则，浏览器会自动携带，但前提是Cookie的配置没问题。

这一步是跨域下Cookie能被携带的必要条件，没开启的话浏览器就算存了Cookie也不会在请求里带上。

3. 调整SameSite属性适配跨域场景 #

现代浏览器默认给Cookie加了SameSite=Lax的限制，这个规则会阻止跨域请求携带Cookie。如果你的场景是完全跨域（比如前端和后端域名不同），必须把SameSite设为None，同时加上Secure（因为SameSite=None要求请求是HTTPS）。修改后的Set-Cookie：

Set-Cookie: key=value;Version=1;Domain=localhost;Path=/;SameSite=None;Secure

要是你本地开发用的是HTTP，Chrome这类浏览器会忽略SameSite=None，这时候可以临时在浏览器设置里禁用SameSite检查（地址栏输入chrome://flags/#same-site-by-default-cookies，把选项改成Disabled），或者改用HTTPS的本地开发环境。

4. 验证Cookie的作用域匹配 #

打开Chrome DevTools的Application面板，找到Storage下的Cookies，查看当前页面的域名和Cookie的Domain是否匹配。比如如果后端把Cookie的Domain设成了example.com，而你前端在localhost，那Cookie肯定不会被存储，因为域名不匹配。

只要把这些配置都调整到位，浏览器就会自动存储Cookie，并且在后续符合条件的请求里自动携带，完全不需要额外的JS交互。

内容的提问来源于stack exchange，提问作者Ignasi