MERN栈Web应用部署后前后端连接异常求助

你的核心问题是Vite的server.proxy仅在本地开发环境生效，部署到Netlify后这个配置不会被执行——因为Netlify是静态文件托管平台，没有内置代理服务器来转发请求。下面是具体修复步骤：

1. 替换本地代理为环境变量（推荐方案） #

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

  VITE_API_URL=https://stock-system-1-h76n.onrender.com
  

• 修改前端请求代码，把相对路径/api/products替换为环境变量拼接的完整路径：

  // 示例：axios请求写法
  const response = await axios.get(`${import.meta.env.VITE_API_URL}/api/products`);
  

• 重新打包前端代码，部署到Netlify。

2. 配置后端正确的CORS策略 #

后端必须允许前端域名跨域请求，否则浏览器会拦截响应：

• 在Express后端中，使用cors中间件并指定允许的源：

  const cors = require('cors');
  // 生产环境指定具体前端域名，避免任意跨域
  app.use(cors({
    origin: 'https://stockmanagement-aakash.netlify.app',
    credentials: true // 需要携带Cookie时开启
  }));
  

• 重启Render上的后端服务。

3. 可选：用Netlify重写规则保留相对路径 #

如果不想修改前端请求路径，可通过Netlify重写规则转发/api开头的请求：

• 在前端项目根目录创建netlify.toml文件，添加以下内容：

  [[redirects]]
    from = "/api/*"
    to = "https://stock-system-1-h76n.onrender.com/api/:splat"
    status = 200
    force = true
  

• 该规则会把前端/api/products请求转发到后端对应接口，无需修改请求代码。

额外检查点 #

• 确认Render后端监听process.env.PORT（Render动态分配端口，不能硬写3000）：

  const PORT = process.env.PORT || 3000;
  app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
  

• 直接访问https://stock-system-1-h76n.onrender.com/api/products，确认后端接口能正常返回数据。

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