React生产环境如何对接Node/Express API？Proxy仅适用于开发环境

Hey there! Let's work through this together since you're new to Node/React deployment—totally get how confusing production proxying can be after relying on the dev server's handy proxy field.

First, let's recap the key point you already found: the proxy setting in your React app's package.json only works with the development server (when you run npm start). Once you build your React app for production (npm run build), that setting is completely ignored. That's where Nginx comes in to handle routing both your static React files and API requests.

Let's Fix Your Nginx Configuration #

Your current config is close, but there are a couple tweaks needed to make it work properly. Here's what to adjust:

1. Handle React Single-Page App Routing

Your location / block is empty right now. For React SPAs, any request that doesn't match a static file (like CSS, JS, images) should redirect to index.html—otherwise, users will get 404 errors when they refresh pages or navigate directly to routes.

2. Verify the proxy_pass Path

The way you set proxy_pass depends on whether your backend API expects requests with or without the /api prefix:

Scenario 1: Backend API uses routes without /api (e.g., /customers instead of /api/customers)

If your API is accessible at http://168.235.83.194:83/customers, and your React app sends requests to /api/customers, your current proxy_pass with a trailing slash is correct—it strips the /api prefix before forwarding. Here's the full corrected config:

server {
    listen 84;
    server_name 168.235.83.194;

    # Serve React's static build files
    root /home/el8le/workspace/notes/client/build;
    index index.html index.htm;

    # Handle all React SPA routes
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Forward /api requests to your backend API
    location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Host $http_host;
        
        proxy_pass http://168.235.83.194:83/; # Trailing slash removes /api prefix
        proxy_ssl_session_reuse off;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

Scenario 2: Backend API uses routes with /api (e.g., /api/customers)

If your API expects requests at http://168.235.83.194:83/api/customers, remove the trailing slash from proxy_pass—this keeps the /api prefix when forwarding:

# ... other config stays the same
location /api {
    # ... same headers as above
    proxy_pass http://168.235.83.194:83; # No trailing slash keeps /api prefix
    # ... other proxy settings
}

Important Final Checks #

• Make sure your React requests use relative paths: In your axios calls, use axios.get('/api/customers') instead of hardcoding the full API URL. This way, requests will automatically use the same host as your React app (port 84), and Nginx will forward them to port 83.
• Reload Nginx after updating the config: Run sudo nginx -s reload to apply the changes.
• Check Nginx logs if issues persist: If you still get empty data or errors, look at /var/log/nginx/error.log for clues—this will tell you if Nginx is having trouble connecting to your API or routing requests.

Once you make these changes, your React app's /api/foo requests should automatically route to your backend API, just like they did in development!

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