配置Nginx反向代理React+Node+PM2时出现Cannot GET问题求助

Let’s break down what’s going on here and fix your API routing issues step by step.

First, Verify the Basics #

Before diving into config tweaks, let’s rule out the simplest culprits:

• Check if Express is actually serving requests on port 4000: Run pm2 list to confirm your Express app is online, then test it directly from your server with curl http://127.0.0.1:4000. If this returns "Hello, world!", your Express app is working—so the issue is definitely with Nginx. If not, fix your PM2 setup first (restart the app, check logs with pm2 logs <app-name> to spot crashes or errors).
• Always reload Nginx after config changes: Every time you edit your Nginx config file, run sudo nginx -t to validate the syntax, then sudo systemctl reload nginx to apply updates. It’s easy to forget this step, and stale configs are a common source of headaches.

Fix the Nginx Configuration #

Your current /api/ location block is close, but let’s refine it to avoid common pitfalls and fix the React Router blank page issue:

Here’s the updated server block with key improvements:

server {
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    server_name www.mywebsite.com; # managed by Certbot

    # Add API-specific logging to debug requests
    access_log /var/log/nginx/api_access.log;
    error_log /var/log/nginx/api_error.log;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;

        # Critical: Handle React Router by returning index.html for all non-API routes
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:4000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;

        # Disable buffering to see real-time responses (helpful for debugging)
        proxy_buffering off;
    }
}

Key changes explained:

• try_files $uri $uri/ /index.html; in the / location: This fixes the original blank page issue by ensuring Nginx returns React’s index.html for all routes that aren’t API endpoints, letting React Router handle client-side routing correctly.
• Added X-Real-IP, X-Forwarded-For, and X-Forwarded-Proto headers: These help Express know the original client IP and request scheme (HTTP/HTTPS), which can prevent routing or authentication issues in some cases.
• API-specific logging: Check /var/log/nginx/api_error.log after testing to spot any Nginx-level errors blocking requests.

Debug the Express Side #

If you still get "Cannot GET /" when hitting https://www.mywebsite.com/api, let’s confirm Express is receiving the request:

• Add a request logging middleware to your Express app to track incoming traffic:

// Add this before your routes
app.use((req, res, next) => {
  console.log(`Received request: ${req.method} ${req.url} from ${req.ip}`);
  next();
});

app.get('/', (req, res) => {
    res.send('Hello, world!');
});

Then check your PM2 logs with pm2 logs <express-app-name>.

• If you see the request logged (e.g., Received request: GET / from 127.0.0.1), but still get a 404, double-check that your Express route is correctly defined (no typos, and it’s added before any 404 fallback handlers).
• If you don’t see the request logged at all, Nginx isn’t forwarding it—go back to verifying your Nginx config syntax and reload status.

Check SSL/HTTPS Configuration #

Since you’re using Certbot, ensure your full Nginx config includes the SSL redirect and certificate paths (Certbot usually adds this automatically, but it’s worth confirming). The X-Forwarded-Proto header we added earlier ensures Express knows the request came over HTTPS, which is important for any logic that depends on the scheme (like generating links).

Final Testing Steps #

1. Run sudo nginx -t to confirm no config syntax errors.
2. Reload Nginx with sudo systemctl reload nginx.
3. Test the API endpoint: Run curl https://www.mywebsite.com/api—this should return "Hello, world!".
4. Test a React route: Visit https://www.mywebsite.com/some-react-route—it should load your React app instead of a blank page.

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