ReactJS前端与NodeJS(Express)服务器对接失败求助

Hey there! I totally get the confusion here—let's break down the core issue and walk through how to fix it step by step.

First, Let's Clarify the Roles of Your Two Servers #

Right now you've got two separate pieces running, and they aren't talking to each other yet:

• React's Development Server: This spins up when you run npm start in your React project, usually on port 3000. It handles compiling JSX into vanilla JavaScript, hot reloading, and serving your frontend React components.
• Express Server: Your backend server on port 8080, which you've set up to serve HTML. The problem is, this HTML is totally separate from your React project—React's code needs special processing that Express doesn't handle on its own.

Why Your Current Setup Isn't Working #

When you write HTML directly in Express, that's a standalone static page. React's components live in their own project, where they need to be bundled, compiled, and served by React's own tools. Your Express server doesn't know how to process React's JSX or connect to your React app's codebase, so the two stay disconnected.

Fix 1: Development Workflow (No Need to Build React Every Time) #

For day-to-day development, you can keep both servers running and set up a proxy to let React communicate with your Express backend:

1. Open your React project's package.json file, add this line at the top level (outside any other objects):

   "proxy": "http://localhost:8080"
   

2. Restart your React development server. Now any API calls you make from React (like fetch('/api/your-data')) will automatically be forwarded to your Express server on port 8080.
3. Keep your Express server focused on backend logic—you don't need to write HTML here. For example, add a simple API endpoint:

   // In your Express server file
   app.get('/api/greet', (req, res) => {
     res.json({ message: 'Hello from your Express backend!' });
   });
   

4. In your React component, fetch this data and display it:

   // In a React component (e.g., App.js)
   import { useEffect } from 'react';
   
   function App() {
     useEffect(() => {
       fetch('/api/greet')
         .then(res => res.json())
         .then(data => console.log(data.message));
     }, []);
   
     return <div>Check your console for the backend message!</div>;
   }
   
   export default App;
   

Fix 2: Production Workflow (Serve React Through Express) #

When you're ready to deploy, you'll want to build your React app and serve its static files directly from Express:

1. In your React project, run npm run build. This creates a build folder with all your compiled, production-ready React code.
2. Update your Express server to serve this build folder as static files, and redirect all non-API requests to React's index.html (since React is a single-page app):

   const path = require('path');
   const express = require('express');
   const app = express();
   
   // Serve static files from the React build folder
   app.use(express.static(path.join(__dirname, '../your-react-project-folder/build')));
   
   // Your API endpoints go here (make sure these come before the catch-all route)
   app.get('/api/greet', (req, res) => {
     res.json({ message: 'Hello from production!' });
   });
   
   // Catch-all route: send all other requests to React's index.html
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, '../your-react-project-folder/build/index.html'));
   });
   
   app.listen(8080, () => {
     console.log('Server running on port 8080!');
   });
   

3. Now when you start your Express server, visiting http://localhost:8080 will load your full React app, and it can still access your Express API endpoints seamlessly.

Give these steps a try, and you should see your React app working with your Express server in no time!

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