解决本地开发 SSO 登录跳转与 Cookie 跨域问题

Others 2025-12-09 08:13:23 2025-12-09 08:14:21 12 次浏览
--- title: 解决本地开发 SSO 登录跳转与 Cookie 跨域问题 description: tags: - Others ---

场景复现与问题分析

🚫 根本原因:
这实际上是 浏览器安全策略(同源策略)SSO 固定回调机制 的冲突。
  • SSO 登录成功后,服务器种下的 Cookie 域通常是 .a.com
  • 你的本地环境是 127.0.0.1,浏览器禁止将 a.com 的 Cookie 写入或发送给 127.0.0.1
  • SSO 通常配置了死板的回调地址(Callback URL),强制跳回线上的 a.com

针对这一痛点,以下整理了三种不同维度的解决方案,按推荐程度排序。

方案一:修改 Hosts 伪装域名 最推荐

这是最通用、副作用最小的方案。通过修改本地 Hosts,让你的本地环境“伪装”成 a.com 的子域名(如 local.a.com)。只要服务器 Cookie 设置了通配符(Domain=.a.com),本地即可完美继承登录态。

操作步骤:

  1. 修改 Hosts 文件
    Windows: C:\Windows\System32\drivers\etc\hosts
    Mac/Linux: /etc/hosts
    127.0.0.1  local.a.com
  2. 调整开发配置
    如果使用了 Webpack/Vite,确保 allowedHosts 或相关配置允许该域名访问。
  3. 访问流程
    浏览器输入 http://local.a.com:端口 -> 跳转登录 -> 登录成功跳回线上 a.com
    ⚡️ 关键一步:此时手动把浏览器地址栏的 a.com 改回 local.a.com:端口,即可携带 Cookie 访问本地环境。

方案二:手动搬运 Cookie 临时救急

如果你不想修改系统配置,或者服务器 Cookie 极其严格(未设置通配符),可以使用“手动搬运”大法。

操作步骤:

  1. 在浏览器正常打开线上的 a.com 并完成登录。
  2. 打开开发者工具 (F12) -> Application -> Cookies
  3. 找到核心 Cookie(如 SESSIONID, token),复制其 NameValue
  4. 回到本地 http://127.0.0.1:端口 页面。
  5. 打开 F12 -> Application -> Cookies,手动添加一条记录,填入刚才复制的值。
  6. 刷新本地页面,通常即可“骗”过后端验证。

方案三:使用 Whistle/Charles 代理 极客方案

如果需要全自动化解决,可以使用 Whistle 等抓包工具拦截并修改响应头。此方法适合复杂的跨域调试。

Whistle 配置示例:

# 场景:将线上 a.com 的 Cookie 强行写入本地
# 当请求返回 Set-Cookie 时,修改其 Domain 为 127.0.0.1
https://a.com resCookies://{domain: "127.0.0.1", path: "/"}

# 或者配合方案一,修复严格的域名限制
https://a.com resCookies://{domain: "local.a.com"}

⚠️ 关于 Webpack/Vite 代理配置

你可能听说过 cookieDomainRewrite 配置。请注意,这个配置仅对经过本地开发服务器代理(Proxy)的接口请求有效。对于 SSO 这种浏览器级别的 302 页面跳转,开发服务器无法拦截并修改其中的 Cookie 写入规则,因此必须配合上述方案使用。