问题现象本地调试一个 Vue 前端项目页面发起请求http://localhost:9528/api/display-risk-service/bigdata/alarm/page?wellNametype1控制台出现了一连串诡异的行为第一个请求返回301 Moved Permanently第二个请求自动跳转到https://xxx.example.com/api/display-risk-service/...方法变成了OPTIONSCORS 预检状态码200第三个请求同样的https地址状态码401 Unauthorized关键线索第二、第三个请求丢失了Authorization请求头导致认证失败。问题定位先来看项目的代理配置vue.config.js// .env.developmentVUE_WESR_URLhttp://10.xxx.xxx.xxx// 注意http// vue.config.jsproxy:{/api/display-risk-service:{target:process.env.VUE_WESR_URL,// http://10.xxx.xxx.xxxchangeOrigin:true,pathRewrite:{^/api/display-risk-service:/api/display-risk-service,},},}完整的请求链路如下浏览器 ──http──→ localhost:9528 (devServer) ↓ proxy 转发到 http://10.xxx.xxx.xxx ↓ 该服务器强制 301 → https://xxx.example.com 浏览器 ←──301─── devServer返回 301 给浏览器 ↓ 浏览器自行跳转到 https://xxx.example.com/... ⚠️ 此时请求脱离了 devServer 代理变成跨域请求 ⚠️ 浏览器出于安全策略自动丢弃 Authorization 头 ↓ 401 Unauthorized为什么会丢头这是浏览器层面的安全行为与任何代理配置无关。当浏览器收到 301 响应并自动跳转时如果跳转目标变成了跨域http://localhost:9528→https://xxx.example.com浏览器会按照 CORS 安全策略丢弃Authorization、Cookie等敏感请求头以防止凭据被意外发送到不受信任的域。换句话说只要浏览器亲自参与了跳转头就一定会丢。这不是 bug是浏览器故意这么做的。踩坑的弯路一开始以为是 proxy 少了一个配置于是尝试了/api/display-risk-service:{target:process.env.VUE_WESR_URL,changeOrigin:true,followRedirects:true,// 让 Node 层自己吃 301不暴露给浏览器...}followRedirects: true让http-proxy-middlewarewebpack-dev-server 的底层代理库在 Node 进程内自动跟随 301拿到最终响应再返回给浏览器。理论上可行但混合协议devServer http target https在 WebSocket 升级、SameSitecookie 等场景下仍可能踩坑不是最干净的方案。最终方案让 devServer 也走 https和目标地址协议一致301 根本不会触发。第一步.env.development- VUE_WESR_URL http://10.xxx.xxx.xxx VUE_WESR_URL https://xxx.example.com第二步vue.config.jsdevServer: { host: localhost, port: port, https: true, open: true, ... }改完后的链路浏览器 ──https──→ localhost:9528 (devServer, https) ↓ proxy 转发到 https://xxx.example.com ↓ 协议一致无 301 浏览器 ←──200─── 响应直接返回 ✅ 全程不离开代理头不丢CORS 不触发总结环节原因301 哪来的后端http://10.xxx.xxx.xxx强制重定向到https为什么浏览器又发了请求浏览器看到 301 Location自动跳转为什么变成 OPTIONS跨域跳转触发 CORS 预检为什么头丢了浏览器跨域跳转时安全策略丢弃敏感头根本原因协议不一致devServer http → 后端 https解决思路统一协议消除 301一句话开发时前后端协议不一致301 重定向让请求脱离代理浏览器出于安全策略丢弃Authorization头。统一走 https 就完事了。写在后面AI 时代很多问题交给工具就能快速定位甚至直接给出答案。但这些 HTTP 协议层面的基础知识——301 重定向、CORS 预检、浏览器跳转时的安全策略——看似微不足道却是排查复杂问题的底气。基础不牢地动山摇。工具再聪明也得知道往哪看和看什么。了解这些底层机制不是为了记住多少 API而是为了在 AI 给不出答案、或者给出看似合理但方向不对的建议时自己还有能力做出判断。