部署后Vite+React前端无法从Node.js后端获取数据求助

核心问题 #

你当前vite.config.js里的server.proxy配置仅在开发环境生效，生产构建后的前端应用不会遵循这个代理规则。部署后前端运行在gym-app-frontend.onrender.com域名下，请求/api时会直接向当前域名发起请求，但该域名下不存在/api接口，因此返回404 "Not Found"，导致JSON解析失败。

解决方案一：用环境变量配置API地址（推荐） #

1. 在前端项目根目录创建.env.production文件，写入生产环境的API地址：

VITE_API_URL=https://gym-app-4y5d.onrender.com/api

（Vite要求环境变量必须以VITE_开头才能被前端代码访问）

2. 修改前端fetch代码，替换硬编码的/api为环境变量：

export default function Leaderboard() {
  const [onerepmaxes, setOnerepmaxes] = useState(null);

  useEffect(() => {
    const fetchOnerepmaxes = async () => {
      const response = await fetch(import.meta.env.VITE_API_URL);
      // 先判断响应状态，避免解析失败报错
      if (!response.ok) {
        console.error('请求失败:', response.statusText);
        return;
      }
      const json = await response.json();
      setOnerepmaxes(json);
    };

    fetchOnerepmaxes();
  }, []);
}

3. 给后端配置CORS规则，允许前端域名跨域请求：
   在Express后端添加cors中间件（未安装的话先执行npm install cors）：

const cors = require('cors');
// 生产环境指定允许的前端域名，更安全
app.use(cors({
  origin: "https://gym-app-frontend.onrender.com"
}));

解决方案二：配置Render静态站点重写规则 #

如果不想修改前端代码，可以在前端项目的public目录下创建_redirects文件，让Render自动转发/api请求到后端：

/api/* https://gym-app-4y5d.onrender.com/api/:splat 200

该规则会将前端所有/api开头的请求转发到后端对应路径，同样需要确保后端配置了正确的CORS规则。

额外检查点 #

• 确认后端接口https://gym-app-4y5d.onrender.com/api确实能正常返回JSON（你已验证过此步可跳过）
• 部署前端时确保.env.production被正确打包（Vite会自动将环境变量注入生产构建）
• 使用方案二时，要确保_redirects文件被包含在生产构建的输出目录中（Vite会自动复制public目录下的文件到dist目录）

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