Great question! The short answer is: the default serve command doesn't support proxy configuration out of the box—since serve is built as a lightweight static file server for serving compiled frontend assets, it doesn’t include built-in proxy functionality. But don’t worry, there are several straightforward workarounds to get the proxy behavior you want.

Option 1: Build a custom Node.js server with proxy support #

This is the most flexible approach if you want to keep using serve while adding proxy capabilities. Here’s how to set it up:

1. First, install the required dependencies (you can skip the global serve install and use a local version instead):

   npm install serve http-proxy-middleware --save-dev
   

2. Create a new file named server.js in your project root with this code:

   const { createServer } = require('http');
   const serve = require('serve');
   const { createProxyMiddleware } = require('http-proxy-middleware');
   
   // Configure static file server to match `serve -s build` behavior
   const staticServer = serve('build', {
     single: true, // Ensures SPA routing works correctly (like the -s flag)
     port: 3000, // Adjust this port to your preference
   });
   
   // Set up proxy for /api requests
   const apiProxy = createProxyMiddleware('/api', {
     target: 'https://example.com:8000',
     changeOrigin: true, // Critical for avoiding CORS issues and correct server routing
     pathRewrite: { '^/api': '/api' }, // Keep the /api prefix (modify if your backend uses a different path)
   });
   
   // Combine static serving and proxy into one server
   createServer((req, res) => {
     if (req.url.startsWith('/api')) {
       // Forward /api requests to the proxy
       apiProxy(req, res);
     } else {
       // Serve React static assets for all other requests
       staticServer(req, res);
     }
   }).listen(3000, () => {
     console.log('Server running on http://localhost:3000');
   });
   

3. Add a production start script to your package.json:

   "scripts": {
     "start:prod": "node server.js"
   }
   

4. Run your production server with proxy support using:

   npm run start:prod
   

Option 2: Modify React's API request paths (no proxy required) #

If you don’t want to set up a custom server, you can adjust your frontend code to target the correct API endpoint directly during the build process:

1. Use an environment variable to define your API base URL. Update the build script in package.json:

   "scripts": {
     "build": "REACT_APP_API_BASE_URL=https://example.com:8000/api npm run build"
   }
   

2. Replace hardcoded /api paths in your React code with the environment variable:

   // Instead of fetch('/api/data')
   fetch(`${process.env.REACT_APP_API_BASE_URL}/data`)
     .then(res => res.json())
     .then(data => console.log(data));
   

3. Build your app as usual, then serve it with serve -s build—all API requests will now go directly to https://example.com:8000/api.

Note: The downside here is that if your API endpoint changes later, you’ll need to rebuild your app. The custom server approach is better for dynamic adjustments.

Option 3: Use Nginx as a reverse proxy (for production deployments) #

If you’re deploying to a dedicated server (like a VPS), setting up Nginx as a reverse proxy is a robust, production-grade solution:

• Configure Nginx to serve your build folder as static files, and add a location block to proxy /api requests:

  server {
    listen 80;
    server_name your-domain.com;
  
    root /path/to/your/build/folder;
    index index.html;
  
    # Handle SPA routing (so React Router works correctly)
    location / {
      try_files $uri $uri/ /index.html;
    }
  
    # Proxy all /api requests to your backend
    location /api {
      proxy_pass https://example.com:8000;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
  

This is ideal for production since Nginx handles SSL, load balancing, and caching out of the box, and it’s far more performant than a Node.js server for serving static assets.

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