Vite设置代理后请求仍跨域？

Question

在使用 Vite 进行前端开发时，开发者常通过配置 `vite.config.js` 中的 `server.proxy` 选项来设置代理，以解决开发环境下的跨域问题。然而，部分开发者在正确配置代理后，仍遇到请求跨域的错误。此类问题通常并非代理配置无效，而是由于请求地址未正确匹配代理规则、未在开发环境使用代理、或后端服务未正确响应 CORS 请求头所致。此外，若使用了 HTTPS 或 WebSocket，也可能导致代理失效。理解 Vite 代理机制与浏览器跨域限制原理，是排查此类问题的关键。

Answer 1

一、Vite 代理机制的基本理解

Vite 提供了开箱即用的开发服务器，其中 server.proxy 配置项可以轻松实现请求代理。其本质是利用中间件（如 http-proxy-middleware）将前端发起的请求转发到目标后端服务。

// vite.config.js 示例
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

以上配置表示所有以 /api 开头的请求都会被代理到 http://localhost:3000，并去掉前缀。

二、常见问题与排查思路

1. 请求路径未正确匹配代理规则：检查请求 URL 是否与配置中的 key 完全匹配或使用正则表达式。
2. 生产环境误用代理：Vite 的代理仅在开发环境生效，部署上线后需通过 Nginx 或网关处理跨域。
3. 后端未设置 CORS 响应头：即使代理有效，若后端响应中没有设置 Access-Control-Allow-Origin，浏览器仍会报跨域错误。
4. HTTPS 与 WebSocket 场景下的代理失效：Vite 默认不支持 HTTPS 代理和 WebSocket 代理，需额外配置。

三、代理配置进阶与多场景应用

配置项	作用说明	典型应用场景
target	指定代理的目标服务器地址	本地开发访问远程 API
changeOrigin	是否更改请求头中的 host 字段为目标服务器域名	当目标服务器基于虚拟主机区分请求时
rewrite	重写请求路径	去除统一前缀，如 /api → 空
secure	是否验证 SSL 证书	代理 HTTPS 接口时设置为 false

四、Vite 代理流程图解析

graph TD
A[前端请求 /api/user] --> B{匹配 server.proxy 中的 /api?}
B -->|是| C[代理中间件拦截请求]
C --> D[修改请求目标为 http://localhost:3000/user]
D --> E[发送请求至后端服务]
E --> F[返回数据给前端]
B -->|否| G[直接发起原始请求]
G --> H{是否跨域?}
H -->|是| I[浏览器阻止请求]
H -->|否| J[正常获取数据]

五、深入理解浏览器跨域限制原理

• 浏览器出于安全考虑，默认禁止跨源请求。
• CORS（跨域资源共享）机制允许服务器通过设置特定响应头来授权跨域请求。
• Vite 代理的本质是在同源下“伪装”请求，绕过浏览器的限制。
• 但若后端响应中缺失关键头信息（如 Access-Control-Allow-Origin），即便代理成功，浏览器依然可能报错。