Vue.js配置devServer代理解决CORS后返回401 Unauthorized排查

问题根因 #

你之前用Express测试已经排除了请求体内容、格式的问题——两个请求解析出来的业务参数完全一致，不会导致后端鉴权失败。401的核心原因全部出在vue.config.js的代理配置写法错误上：

• http-proxy-middleware（Vue开发服务器代理的底层依赖）的target参数要求填写目标服务的源地址（协议+域名/IP+端口），不能直接拼接完整的接口路径。你当前写的target: 'https://localhost/api/login'会触发路径合并逻辑：本地匹配到的/login请求路径会被拼到target的路径后面，最终实际转发的请求地址是https://localhost/api/login/login，根本没有打到正确的登录接口上，命中了后端需要登录才能访问的鉴权路由，自然返回401未授权。
• 本地后端用的是自签名HTTPS证书，代理默认开启SSL证书校验，会导致请求链路的异常返回，进一步放大问题表现。

修复方案 #

调整vue.config.js代理配置 #

按照代理的参数规则重新书写配置，避免路径拼接错误：

module.exports = {
    devServer: {
        proxy: {
            // 匹配所有带/api前缀的接口请求，避免路径匹配歧义
            '/api': {
                // target仅填目标服务的根地址，不携带具体接口路径
                target: 'https://localhost',
                changeOrigin: true,
                // 关闭自签名证书的校验逻辑，适配本地HTTPS开发服务
                secure: false
            }
        }
    }
}

调整前端axios请求路径 #

因为代理拦截的是/api开头的请求，需要把原来的请求路径和后端真实接口路径对齐：

created() {
    axios({
      method: 'post',
      // 替换成和后端一致的/api/login路径，会被代理自动拦截转发
      url: '/api/login',
      headers: {"content-type": "application/json"},
      data: {
        User: {
          "login_id": "admin",
          "password": "xxx"
        }
      }
    }).then(res => console.log(res.data)).catch(err => console.log(err.response))
}

验证说明 #

修改配置后必须重启Vue开发服务器让代理配置生效，再观察转发请求：

• 实际打到后端的路径应该和Postman测试的/api/login完全一致，不会出现路径拼接的多余片段
• 两个请求的content-length数值差异不需要额外处理——这个差异只是因为axios自动序列化JSON时会去掉无意义的换行、空格，后端解析后的业务参数完全一致，不会影响鉴权逻辑。

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