Node.js API 端口问题：React表单调用API时出现“Could Not proxy request”错误

Hey there, let's tackle this "Could Not proxy request" error you're hitting when connecting your React form to your Node.js API. I’ve run into this exact issue dozens of times, so let’s break down the most common fixes step by step:

First, make sure your React app’s proxy setup is correct. The simplest way is adding a proxy field to your package.json—but it has to point directly to your backend’s base URL, no trailing paths:

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:5000", // Match your Node.js server port here
  // ... rest of your package.json
}

If your API uses a base path like /api, don’t add it to the proxy URL. Instead, include it in your fetch requests (e.g., fetch('/api/submit-form')). For more complex proxy rules (like multiple endpoints), use a setupProxy.js file in your src folder instead:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

Important: After changing proxy settings, restart your React development server—won’t take effect otherwise!

This sounds obvious, but it’s easy to miss:

• Make sure your Node server is actually running (check your terminal for the "Server running on port X" message).
• Test your API directly with a tool like Postman or curl: curl http://localhost:5000/api/submit-form (replace with your endpoint). If this fails, the issue is with your backend, not the proxy.

Sometimes the proxy doesn’t kick in as expected, leading to CORS errors. Add the cors package to your Node.js backend to eliminate this:

1. Install it: npm install cors
2. Add it to your Express app:

const express = require('express');
const cors = require('cors');
const app = express();

// Enable CORS for all requests (adjust origins in production!)
app.use(cors());

// Parse JSON bodies (required for form data)
app.use(express.json());

// Your API routes here
app.post('/api/submit-form', (req, res) => {
  console.log('Received form data:', req.body);
  res.json({ success: true, message: 'Form submitted!' });
});

app.listen(5000, () => console.log('Backend running on port 5000'));

Typos or mismatched paths are a common culprit:

• If your React form sends a request to /api/submit-form, your Node.js route must be app.post('/api/submit-form', ...)—check for spelling, capitalization, and trailing slashes (e.g., /api/submit-form/ vs /api/submit-form).
• Avoid absolute URLs in your React fetch calls (like http://localhost:5000/api/submit-form)—the proxy only works with relative paths.

React’s dev server defaults to port 3000—make sure your Node.js backend is running on a different port (like 5000, 8080, etc.). If both use the same port, one will fail to start, breaking the proxy.

I can’t count how many times this fixes the issue. Stop both your React and Node servers, then restart them in order: first start the backend, then the React dev server.

If none of these work, double-check if you’re using any environment variables that override the proxy (like REACT_APP_API_URL), or if there’s a firewall/antivirus blocking the connection between ports.

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