React/Express架构下API响应被通配URL覆盖返回404页面问题

Got it, let's fix that API 404 issue you're hitting. The root cause here is almost certainly route ordering—Express matches routes top to bottom, and if your wildcard catch-all route (for serving React's client-side routes) is placed before your API endpoints, it's gobbling up all requests including your API calls and returning the React 404 page instead.

Here's how to resolve it, with a complete, corrected version of your code:

Step-by-Step Solution #

1. Define API Routes First: All your /api/ endpoints need to come before both the static file serving and the wildcard catch-all route. This ensures Express matches API requests first before falling back to static assets or the React app.
2. Add the Catch-All Route Last: The app.get('*', ...) route should always be the final route definition—it handles all requests that aren't API endpoints or static files (like React client-side routes).
3. Add Error Handling: Don't forget to catch Promise rejections in your API route to avoid unhandled errors.

Corrected Full Code #

const path = require('path')
const express = require('express')
const CLIENT_BUILD_PATH = path.join(__dirname, '../build')
const serialize = data => JSON.stringify({ data })

// Replace with your actual data loading logic
const loadData = () => {
  return { 
    message: 'Success! API data loaded',
    items: ['item1', 'item2', 'item3']
  }
}

const app = express()

// 1. FIRST: Define all API routes
app.get('/api/get/data', (request, response) => {
  Promise.resolve(loadData())
    .then(data => {
      console.log(data)
      response.writeHead(200, {'Content-Type': 'application/json'})
      response.end(serialize(data))
    })
    .catch(err => {
      // Handle errors gracefully
      response.writeHead(500, {'Content-Type': 'application/json'})
      response.end(JSON.stringify({ error: err.message }))
    })
})

// 2. SECOND: Serve static React build files
app.use(express.static(CLIENT_BUILD_PATH))

// 3. LAST: Catch-all route for React client-side routing
app.get('*', (req, res) => {
  res.sendFile(path.join(CLIENT_BUILD_PATH, 'index.html'))
})

// Start the server
const PORT = process.env.PORT || 3001
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`)
})

Key Explanations #

• Route Order Matters: Express processes routes in the order they're defined. By putting API routes first, /api/get/data will be matched and handled before the wildcard route can intercept it.
• Static Files: express.static serves your React build's assets (JS, CSS, images) correctly, so those requests won't hit the catch-all route either.
• Error Handling: The .catch() block ensures that if loadData() fails, your server returns a proper 500 error instead of hanging or crashing.

Now when you hit /api/get/data, you'll get your JSON response instead of the React 404 page, and your client-side routes will still work as expected.

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