解决本地开发 SSO 登录跳转与 Cookie 跨域问题
Others 2025-12-09 08:13:23 2025-12-09 08:14:21 12 次浏览
---
title: 解决本地开发 SSO 登录跳转与 Cookie 跨域问题
description:
tags:
- Others
---
场景复现与问题分析
🚫 根本原因:
这实际上是 浏览器安全策略(同源策略) 与 SSO 固定回调机制 的冲突。
这实际上是 浏览器安全策略(同源策略) 与 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),本地即可完美继承登录态。
操作步骤:
-
修改 Hosts 文件
Windows:C:\Windows\System32\drivers\etc\hosts
Mac/Linux:/etc/hosts
127.0.0.1 local.a.com -
调整开发配置
如果使用了 Webpack/Vite,确保allowedHosts或相关配置允许该域名访问。 -
访问流程
浏览器输入http://local.a.com:端口-> 跳转登录 -> 登录成功跳回线上a.com。
⚡️ 关键一步:此时手动把浏览器地址栏的a.com改回local.a.com:端口,即可携带 Cookie 访问本地环境。
方案二:手动搬运 Cookie 临时救急
如果你不想修改系统配置,或者服务器 Cookie 极其严格(未设置通配符),可以使用“手动搬运”大法。
操作步骤:
- 在浏览器正常打开线上的
a.com并完成登录。 - 打开开发者工具 (F12) -> Application -> Cookies。
- 找到核心 Cookie(如
SESSIONID,token),复制其 Name 和 Value。 - 回到本地
http://127.0.0.1:端口页面。 - 打开 F12 -> Application -> Cookies,手动添加一条记录,填入刚才复制的值。
- 刷新本地页面,通常即可“骗”过后端验证。
方案三:使用 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 写入规则,因此必须配合上述方案使用。