迁移至Vite.js后代理在部署环境失效，本地运行正常

Vite的server.proxy配置仅在本地开发阶段生效，当你构建项目并部署到开发环境后，Vite不会再提供代理服务——此时前端是静态资源，所有请求会直接发送到当前部署的域名（也就是https://my-website.com），这就是你看到请求路径不符合预期的原因。

原CRA的代理能在部署环境生效，是因为CRA开发时依赖Express服务器，若你的部署环境也基于这个Express服务（比如用自定义Node服务托管），代理中间件会持续工作；但Vite构建后输出的是纯静态文件，没有内置服务器，因此需要在部署环境的服务器上单独配置反向代理。

解决方案 #

1. Nginx服务器配置示例 #

如果开发环境用Nginx部署，在Nginx配置文件中添加反向代理规则：

server {
  # 其他基础配置...

  location /api/sandbox/ {
    proxy_pass https://my-sandbox-service.com/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    # 若目标服务HTTPS证书不可信，添加此行对应原配置的secure: false
    proxy_ssl_verify off;
  }

  # 其他代理规则...
}

注意proxy_pass末尾的斜杠，它会自动将/api/sandbox/后的路径拼接在目标地址后，实现路径重写效果。

2. Node.js后端（Express）配置示例 #

若部署环境是Node.js后端（用Express托管静态文件），可复用类似原CRA的代理逻辑：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const path = require('path');

const app = express();

// 托管Vite构建后的静态文件
app.use(express.static(path.join(__dirname, 'build')));

// 配置代理
app.use(
  '/api/sandbox',
  createProxyMiddleware({
    target: 'https://my-sandbox-service.com',
    pathRewrite: { '^/api/sandbox': '' },
    changeOrigin: true,
    secure: false,
  })
);

// 其他代理规则...

// 处理SPA路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

3. 前端环境变量切换（备选方案） #

若不想在服务器端配置，也可通过前端环境变量直接指定API地址：

• 在项目根目录创建对应部署环境的环境文件（比如.env.deployment）：

VITE_API_SANDBOX_BASE=https://my-sandbox-service.com

• 在前端请求代码中使用该变量：

const baseUrl = import.meta.env.VITE_API_SANDBOX_BASE;
// 发起请求时直接拼接路径，示例：
axios.post(`${baseUrl}/v2/auth/login`, requestData);

这种方式无需代理，直接请求目标服务，需确保目标服务允许跨域（或后端配置CORS）。

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