chrome 禁用开发环境 localhost 使用第三方 cookie 坑问题: umi 项目开发环境 localh

问题: umi 项目开发环境 localhost:8000 在 chrome 中单点登录后无法正常打开。Edge和Firefox正常

原因：chrome84之后禁用的第三方cookie。在 localhost 开发环境请求 site.example.com/api/current… 接口的时候没有携带授权后的 cookie。鉴权失败，再重定向到 sso..example.com

登录流程图

graph TD
打开localhost:8000 --> B[请求https://site.example.com/api/currentUserInfo ] -- Request Headers 携带cookie, <br>Response Headers 响应 set-cookie <br> domain=example.com, path=api --> A{校验cookie, 验证是否登录}
A -- 已登陆 --> 成功进入开发环境
A -- 未登录 --> 重定向到https://sso..example.com授权登录 --> C[登录成功]
C --> |设置新的 cookie|重定向到localhost --> B

这里会出现一个循环，在 Chrome 中，会在 localhost 和 site.example.com 反复跳转。原因是 localhost 未授权重定向到 site，但是 site 已经授权又重定向到 localhost

解决办法

思路是解决跨越cookie的问题

umi 设置 proxy 解决跨域 cookie 问题
改hosts建一个新的域名 dev.example.com 作为开发环境域名
set with SameSite=None and Secure 开启第三方 cookie
Chrome 降级到 83 及以下
使用 Nginx 代理

使用 proxy 问题

解决了跨域问题，但 set-cookie 设置 domain, localhost 还是带不上 cookie

改hosts

hosts 文件配置 127.0.0.1 dev.example.com

打开 dev.example.com:8000 作为开发环境

产生问题：调用接口被服务器拒绝。估计是防火墙或者接口配置问题

SameSite

A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. A cookie with the Secure attribute is sent to the server only with an encrypted request over the HTTPS protocol,

没有后台代码，开启不了 set-cookie的 SameSite 和 Secure 配置

使用 Nginx 代理

Nginx 配置

server {
    listen       443 ssl;
    server_name  dev.nfapp.southcn.com;

    ssl_certificate      server.crt;
    ssl_certificate_key  server.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:8000;
    }
}

服务器证书 server.crt

服务器密钥 server.key

根域名证书 root.crt，导入电脑可信证书

dev.nfapp.southcn.com:8000 作为开发环境，sso..example.com 授权后重定向到locahost，需要重新打开 dev.nfapp.southcn.com:8000

项目中使用了 webSocket，协议需要使用 wss

document.location.protocol === "https:"
      ? `wss://${webSocketIP}`
      : `ws://${webSocketIP}`,

代理后的登录流程图

graph TD
D[打开https://dev.nfapp.southcn.com:8000] --> B[请求https://site.example.com/api/currentUserInfo ] -- Request Headers 携带cookie, <br>Response Headers 响应 set-cookie <br> domain=example.com, path=api --> A{校验cookie, 验证是否登录}
A -- 已登陆 --> 成功进入开发环境
A -- 未登录 --> 重定向到https://sso..example.com授权登录 --> C[登录成功]
C --> |设置新的 cookie|重定向到localhost --> |手动跳转|D

修改建议

https://sso. 登录授权后token放到 url 后面。
授权后重定回用户打开的URL

// koa
ctx.redirect(ctx.request.origin + '?token=xxxx');

umi 2.x 坑

不支持配置 webpack DevServer 的 https: true 配置

umi 3.x 支持开启 HTTPS 的 localhost

参考

medium.com/swlh/7-keys…

自签HTTPS证书

chrome 禁用开发环境 localhost 使用 第三方 cookie 坑