Vite React+Express项目部署Render后前端无法连接后端求助

问题背景 #

使用Vite搭建React前端，Express.js作为后端，开发模式和本地预览模式下均可正常连接已部署的后端，但前端部署到Render平台后，无法与后端建立连接。排查谷歌搜索及Vite官方文档后未找到有效解决办法，怀疑问题与Render上的dist目录配置有关。

现有配置 #

vite.config.js #

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "https://face-detect-server.onrender.com",
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

React自定义请求Hook（useAuth.js） #

import axios from "axios";
import { useState } from "react";

const useAuth = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async (method, url, data) => {
    setIsLoading(true);
    setError(null);

    try {
      if (method === "post" && url === "/api/users") {
        const { username, email, password } = data;
        // 省略具体业务逻辑
      }
      return res.data;
    } catch (error) {
      console.log(error);
      setError(error.response.data.message);
    } finally {
      setIsLoading(false);
    }
  };

  return { fetchData, isLoading, error };
};

export default useAuth;

Render平台配置截图 #

核心问题分析 #

Vite的server.proxy配置仅对开发服务器生效，生产构建后的静态文件不会使用这个代理规则。部署到Render后，前端发起的/api请求会直接指向前端所在的域名，而非后端地址，这是导致连接失败的根本原因。

解决步骤 #

1. 添加生产环境API地址变量
   在项目根目录创建.env.production文件，添加后端地址：

   VITE_API_BASE_URL=https://face-detect-server.onrender.com
   

   Vite会自动注入以VITE_开头的环境变量，可通过import.meta.env访问。

2. 修改请求Hook的URL拼接逻辑
   在useAuth的fetchData方法中，拼接环境变量的API地址：

   const fetchData = async (method, url, data) => {
     setIsLoading(true);
     setError(null);
   
     try {
       // 拼接基础API地址
       const baseUrl = import.meta.env.VITE_API_BASE_URL || "";
       const fullUrl = `${baseUrl}${url}`;
       
       if (method === "post" && url === "/api/users") {
         const { username, email, password } = data;
         // 原有业务逻辑
       }
       
       // 发起请求时使用完整URL
       const res = await axios[method](fullUrl, data);
       return res.data;
     } catch (error) {
       console.log(error);
       setError(error.response?.data?.message || "请求失败");
     } finally {
       setIsLoading(false);
     }
   };
   

3. 验证后端CORS配置
   确保Express后端的CORS中间件允许前端Render域名访问，可动态设置允许的来源：

   const cors = require('cors');
   app.use(cors({
     origin: (origin, callback) => {
       // 允许前端域名或本地开发地址
       const allowedOrigins = [
         'https://your-frontend-render-domain.com',
         'http://localhost:5173'
       ];
       if (!origin || allowedOrigins.includes(origin)) {
         callback(null, true);
       } else {
         callback(new Error('Not allowed by CORS'));
       }
     },
     credentials: true
   }));
   

4. 确认Render部署配置
   从截图看，Build Command设为npm run build、Publish Directory设为dist是正确的，确保部署过程中dist目录被正确生成并上传。

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