React+Node+Docker部署后，如何用Nginx拦截请求并隐藏第三方API

Hey there! Let's break down how to set up Nginx to handle your React + Node.js setup, protect your backend, and hide those third-party API calls. Here's a step-by-step guide tailored to your needs:

一、Forward React API Requests to Node.js & Block Direct Backend Access #

First, we'll configure Nginx to serve your React static files and proxy API requests to your Node.js server, while making sure no one can hit the backend directly from a browser.

1. Nginx Configuration Example #

Assume your React build is in /usr/share/nginx/html, your Node.js container is named node-api (or use its internal IP + port like 172.17.0.2:3001), and your API uses the /api prefix.

Create or update your nginx.conf:

server {
    listen 80;
    server_name your-domain.com; # Swap this with your actual domain or localhost

    # Serve React static files & support History mode routing
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html; # Fixes 404s when reloading React routes
    }

    # Proxy API requests to Node.js
    location /api {
        proxy_pass http://node-api:3001; # Point to your Node.js service
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Block direct browser access to the API
        if ($http_referer !~* "^http(s)?://your-domain.com") {
            return 403; # Forbidden if request doesn't come from your domain
        }
    }
}

2. Key Details #

• React Routing Fix: The try_files directive ensures your React single-page app routes work correctly when users refresh the page.
• Backend Protection: Checking the Referer header ensures only requests coming from your React app (via Nginx) can access the /api endpoints. For stricter security, add a custom header in Nginx like proxy_set_header X-Proxy-Key "your-secret-string" and validate this header in your Node.js code—reject requests without it.

3. Docker Setup Tweaks #

Make sure your Nginx and Node.js containers are on the same Docker network so Nginx can reach the Node.js service. Here's a sample docker-compose.yml:

version: '3.8'
services:
  nginx-react:
    build: ./react-app # Or use the official Nginx image and mount your build folder
    volumes:
      - ./react-app/build:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/nginx.conf # Mount your custom Nginx config
    ports:
      - "80:80"
    depends_on:
      - node-api
    networks:
      - app-network

  node-api:
    build: ./node-api
    # Don't expose this port to the public—only accessible via Docker network
    # ports: ["3001:3001"] # Remove or bind to 127.0.0.1 if needed
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

By not exposing the Node.js port publicly, you add an extra layer of security—only Nginx can communicate with it internally.

二、Hide Third-Party API Calls with Nginx Proxy #

If your React app needs to call external APIs, proxying through Nginx hides the third-party domain from the browser and solves CORS issues.

1. Add Third-Party Proxy to Nginx #

Add this location block to your Nginx server config:

# Proxy third-party API requests
location /third-party-proxy {
    proxy_pass https://actual-third-party-api.com; # Replace with real API domain
    proxy_set_header Host actual-third-party-api.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # Optional: Rewrite the request path if needed
    # Example: If third-party uses /v1/data, map /third-party-proxy/data to /v1/data
    rewrite ^/third-party-proxy/(.*)$ /v1/$1 break;
}

2. Update React Fetch Calls #

Instead of fetching directly from the third-party domain, point your requests to the Nginx proxy path:

// Before: fetch("https://actual-third-party-api.com/v1/data")
// After:
fetch("/third-party-proxy/data")
  .then(res => res.json())
  .then(data => console.log(data));

Now, the browser's Network tab will only show requests to your domain, not the third-party API—perfect for hiding sensitive endpoints or avoiding CORS errors.

3. Bonus: Performance Optimizations #

Add caching for static assets to speed up your React app:

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    root /usr/share/nginx/html;
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

Final Notes #

With these configurations, you'll have:

• A React app served by Nginx with working frontend routing
• Node.js backend protected from direct browser access
• Third-party API calls hidden behind your Nginx proxy

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