MERN应用Create-React-App代理异常：Axios请求404等错误求助

Let’s get to the bottom of this proxy issue—since Postman works but React doesn’t, the problem is likely in how your client communicates with the proxy or how the proxy routes requests. Here’s a step-by-step breakdown to fix it:

1. Double-Check Server & Client Startup #

First, make sure both your Express server and React dev server are actually running and talking on the right ports:

• Verify Express is on port 5000: Run lsof -i :5000 (Mac/Linux) or netstat -ano | findstr :5000 (Windows) to confirm the port is occupied by your Node server. If not, your dev script might be failing to start the backend.
• Fix startup order: Your current dev script uses & to run both processes at once, but React might start before Express is ready. For Mac/Linux, add a small delay:

  "dev": "(cd backend && nodemon server) & sleep 3 && npm run start"
  

  For Windows, use the concurrently package to manage processes properly:

  npm install concurrently --save-dev
  

  Then update your scripts:

  "dev": "concurrently \"cd backend && nodemon server\" \"npm run start\""
  

2. Audit Your Axios Configuration #

Your Axios setup might be missing critical details that break proxy routing:

• Explicitly set baseURL: Even though the proxy should handle relative paths, adding this ensures Axios uses the React dev server as its base (which forwards to Express):

  axios.defaults.baseURL = 'http://localhost:3000';
  

• Fix Authorization header formatting: If your token doesn’t include the Bearer prefix, your Express server might reject the request (returning a 404 that looks like a proxy issue):

  if (auth.loggedIn()) {
    axios.defaults.headers.common['authorization'] = `Bearer ${auth.getToken()}`;
  }
  

• Check for accidental config overrides: Make sure no other part of your app is overwriting Axios defaults (like changing baseURL or headers elsewhere).

3. Validate Proxy & Server Routing #

• Confirm proxy string is correct: Your package.json proxy is set to "http://localhost:5000"—this is the right format for single proxies (avoid using an object unless you’re using http-proxy-middleware for multiple routes).
• Match Express routes exactly: Double-check that your Express server has routes that match your Axios requests:
  • For axios.get('/api/verify'), ensure Express has app.get('/api/verify', ...) (no typos, correct HTTP method, and no extra slashes).
• Check for CORS misconfigurations: Even though the proxy should handle CORS, if your Express server has strict CORS rules, it might block the proxy request. Ensure you’re using cors() middleware correctly:

  const cors = require('cors');
  app.use(cors()); // Allows all origins (safe for development)
  

4. Clear React Dev Server Cache #

Sometimes cached proxy settings can cause issues. Try:

• Restarting the React dev server completely.
• Deleting the node_modules/.cache folder in your client directory, then restarting.

5. Debug the Actual Request #

Use your browser’s DevTools (Network tab) to inspect the failing request:

• Check the Request URL: It should be http://localhost:3000/api/verify (not directly hitting 5000).
• Look at the Response tab: If the 404 message comes from Express, your route is misconfigured. If it comes from React, the proxy isn’t forwarding the request at all.

6. Rule Out Port/Firewall Issues #

• Try changing ports: Switch Express to use 5001, update your package.json proxy to "http://localhost:5001", and restart both servers—this can rule out port conflicts or firewall blocks.
• Temporarily disable your firewall/antivirus to see if it’s blocking communication between the dev server and Express.

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