MERN Stack配置：Express与React如何共用端口并解决表单POST报错？

Absolutely, you can configure your MERN stack to run both the React frontend and Node/Express backend on the same port—this eliminates cross-port issues and lets you use standard HTML form POST requests exactly as you want. Here are two tailored approaches for development and production environments:

Development Environment #

If you're using Create React App (CRA) for your frontend, the easiest way is to leverage CRA's built-in proxy feature:

1. Open your React project's package.json file.
2. Add a top-level "proxy" field pointing to your backend's local server URL. For example, if your Express backend runs on http://localhost:5000, add:

   "proxy": "http://localhost:5000"
   

3. Restart your React development server. Now, any API requests from your React app (like form POSTs to /api/submit-form) will automatically be forwarded to your Express backend running on port 5000.
4. Your HTML form can use a relative action path, no full URL needed:

   <form action="/api/submit-form" method="POST">
     <!-- form fields here -->
     <button type="submit">Submit</button>
   </form>
   

Production Environment #

For a deployed app, you'll serve your React frontend directly from your Express backend:

1. In your React project, run npm run build to generate an optimized production build (this creates a build folder with static assets).
2. In your Express backend code, add middleware to serve the React static files and handle SPA routing:

   const express = require('express');
   const path = require('path');
   const app = express();
   
   // Parse form data (critical for handling POST requests)
   app.use(express.urlencoded({ extended: true }));
   app.use(express.json());
   
   // Your API routes go FIRST
   app.post('/api/submit-form', (req, res) => {
     // Handle form submission logic here
     console.log(req.body);
     res.status(200).send('Form submitted successfully');
   });
   
   // Serve React static files
   app.use(express.static(path.join(__dirname, '../client/build')));
   
   // Catch-all route for SPA: return React's index.html for any non-API request
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, '../client/build/index.html'));
   });
   
   // Start server on your desired port (e.g., 5000)
   const PORT = process.env.PORT || 5000;
   app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
   

3. Now, when you start your Express server, it will serve both your React frontend and API endpoints on the same port. Your form can use the same relative action path as in development.

Critical Note #

Don't forget to include Express's body-parsing middleware (express.urlencoded and express.json)—without this, your backend won't be able to read the form data sent in POST requests, which could still lead to errors even with the same port setup.

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