如何解决Chrome SameSite更新导致Cookie无法发送至服务器的问题

Chrome 94版本之后强化了混合上下文（HTTP站点请求HTTPS接口）的Cookie限制，同时SameSite默认规则的优先级更高，仅修改chrome://flags内的SameSite相关配置已经无法覆盖混合上下文的安全限制，针对你的场景可以选择以下方案解决：

方案1：本地开发环境配置HTTPS（最推荐） #

该方案完全符合Chrome安全规范，和生产环境行为一致，不会出现开发正常、生产异常的兼容性问题：

• Angular CLI原生支持HTTPS启动，直接在启动命令中添加SSL参数即可：

  ng serve --ssl
  

  启动后访问https://mysite-local.my-company.com:4200（端口和你本地启动端口保持一致），首次访问时点击「高级」-「继续访问」信任自签名证书即可。
• 如果公司有统一的内网证书，也可以指定自定义证书启动：

  ng serve --ssl --ssl-key 你的密钥文件路径.pem --ssl-cert 你的证书文件路径.pem
  

配置完成后本地和测试服务均为HTTPS协议，Chrome不会再拦截跨子域请求的Cookie。

方案2：配置Angular开发代理（次推荐） #

该方案通过本地开发服务转发请求，完全绕开跨域限制，不需要修改浏览器配置或hosts：

• 在项目根目录新建proxy.conf.json配置文件，内容如下：

  {
    "/api": {
      "target": "https://mysite-test.my-company.com",
      "secure": true,
      "changeOrigin": true,
      "cookieDomainRewrite": "mysite-local.my-company.com"
    }
  }
  

  其中/api为你需要转发的接口前缀，可根据实际业务调整。
• 修改package.json内的启动脚本，添加代理配置参数：

  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  }
  

• 启动项目后前端所有匹配前缀的请求都会由本地开发服务器转发到测试服务，属于同域请求，不存在跨域Cookie携带问题。

方案3：修改Chrome启动参数（临时调试用） #

该方案仅适合临时快速调试，不建议长期使用：

• 关闭所有Chrome进程，右键点击Chrome快捷方式选择「属性」，在「目标」输入框的原有内容末尾添加启动参数：

  --unsafely-treat-insecure-origin-as-secure=http://mysite-local.my-company.com:4200
  

  注意端口和本地Angular启动端口保持一致，多个地址用逗号分隔。
• 用修改后的快捷方式启动Chrome，地址栏下方会显示安全提示，忽略即可，此时Chrome会将指定的HTTP站点视为安全站点，允许携带Cookie请求HTTPS接口。

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