React setupProxy.js构建部署后失效，求解决方案

核心原因 #

setupProxy.js 是仅针对React开发服务器（webpack-dev-server）的配置文件，只在执行 yarn start 启动开发服务时生效。构建后的产物是纯静态HTML/CSS/JS文件，setupProxy.js 不会被打包到构建产物中，也无法被静态文件服务器（比如你用的 serve）识别，所以部署后代理完全失效。

解决方案 #

根据你的部署场景，有几种可行的方案：

1. 直接在请求库中配置BaseURL（最简单的生产环境方案）

既然你已经验证过直接配置axios的baseURL可以正常工作，这是生产环境最通用的方式。可以进一步优化为区分环境的配置，开发时依赖setupProxy转发，生产时直接请求目标API地址：

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: process.env.NODE_ENV === 'development' 
    ? '/'  // 开发环境用相对路径，靠setupProxy转发
    : process.env.REACT_APP_API_URL  // 生产环境直接用目标API地址
});

2. 自定义Node.js服务器实现代理（适配serve的替代方案）

如果你需要在部署时保留代理逻辑，可以自己写一个简单的Express服务器，同时提供静态文件服务和代理功能：

1. 安装依赖：

yarn add express http-proxy-middleware

2. 创建server.js文件：

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

const app = express();

// 配置/api路由的代理
app.use('/api', createProxyMiddleware({
  target: process.env.REACT_APP_API_URL,
  secure: false,
  changeOrigin: true
}));

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

// 处理单页应用的路由 fallback
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

3. 修改部署命令：

env-cmd -f .env.development node server.js

3. 使用Nginx反向代理（正式生产环境推荐）

如果是正式生产部署，建议用Nginx这类专业的反向代理服务器，配置更稳定、性能更好：

server {
  listen 80;
  server_name 你的域名或IP;

  # 指向构建产物的目录
  root /usr/share/nginx/html/build;
  index index.html;

  # 代理/api请求到后端服务
  location /api {
    proxy_pass http://localhost:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  # 处理单页应用的路由，避免刷新页面404
  location / {
    try_files $uri $uri/ /index.html;
  }
}

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