Vite 开发环境代理正常但生产环境跨域怎么办？

Question

仓乃文 · Accepted Answer

Vite 的 server.proxy 只在开发环境生效，生产环境没有 Vite Dev Server，代理自然失效。这是初学者最容易翻车的认知盲区。

问题本质：
```
开发环境：浏览器 → Vite Dev Server → 代理到 API（同源，无跨域）
生产环境：浏览器 → API 服务器（跨域！）

Vite 的 proxy 是开发工具，不是生产方案！
```

生产环境解决方案：
```nginx
# 方案 1：Nginx 反向代理（推荐）
server {
  location /api/ {
    proxy_pass http://api-server:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}
# 浏览器请求 /api/users → Nginx 转发，无跨域

# 方案 2：CORS（后端配置）
Access-Control-Allow-Origin: https://your-frontend.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Credentials: true
```

让开发和生产行为一致：
```typescript
// 统一请求前缀为 /api
// 开发：Vite proxy 转发 /api → 后端
// 生产：Nginx 转发 /api → 后端
const api = axios.create({
  baseURL: "/api",  // 统一用相对路径
});
// 不要这样写：
// baseURL: import.meta.env.VITE_API_URL  // 不同环境不同地址，容易出问题
```

补充说明：
- 规则：Vite proxy 只管开发，生产跨域靠 Nginx 或 CORS
- 最佳实践：前端统一用 /api 前缀，开发和生产都走代理转发
- 不要在前端代码中硬编码后端地址
- CORS 需要后端配合，Nginx 代理前端自己就能搞定
- cookie 跨域需要 withCredentials + Allow-Credentials