React+Node+Express连MySQL，单条数据GET请求报404错误

首先，端口不匹配的可能性极低——毕竟你能正常获取全部数据和提交新数据，说明前后端的跨域/代理配置已经生效，页面404的问题集中在前端路由匹配或前端开发服务器的 fallback 配置上，以下是具体排查方向：

1. 前端路由未配置动态参数路由 #

检查你的React路由配置，确认是否存在匹配/posts/:id的路由规则，且没有被其他路由提前拦截。比如React Router v6的正确配置应该是：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import PostsList from './components/PostsList';
import PostDetail from './components/PostDetail';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<PostsList />} />
        {/* 必须配置这条动态路由，才能匹配/posts/4这类路径 */}
        <Route path="/posts/:id" element={<PostDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

如果之前用JSON Server时路由是正常的，确认迁移后有没有误删或修改了这条路由。

2. 前端开发服务器未配置History模式 fallback #

当你直接访问http://localhost:5173/posts/4时，Vite（或Create React App）的开发服务器会默认把这个路径当成静态文件去查找，找不到就返回404，不会交给React路由处理。解决方法是开启historyApiFallback：

Vite配置示例（vite.config.js）： #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    // 保持你的代理配置（如果有的话）
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 你的后端端口
        changeOrigin: true,
      },
    },
    // 关键配置：让所有404请求 fallback 到index.html
    historyApiFallback: true,
  },
})

Create React App配置： #

Create React App默认支持History模式，无需额外配置，但如果你自定义了public目录或路由规则，确认没有冲突。

3. 后端单条数据接口的潜在问题 #

如果页面能打开，但加载数据时出现API 404，那要检查后端接口：

• 确认后端路由路径是否正确，比如是否是app.get('/api/posts/:id', ...)，有没有少写s或者参数名错误（比如用postId代替id）；
• 确认接口中是否正确获取req.params.id并查询MySQL，比如：

app.get('/api/posts/:id', async (req, res) => {
  try {
    const postId = req.params.id;
    // 用参数化查询避免SQL注入
    const [result] = await connection.query('SELECT * FROM posts WHERE id = ?', [postId]);
    if (result.length === 0) {
      return res.status(404).json({ message: '帖子不存在' });
    }
    res.json(result[0]);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

快速排查步骤 #

1. 打开浏览器控制台的Network标签，访问/posts/4，看返回404的是页面请求还是API请求；
2. 若页面请求404，优先检查前端路由和historyApiFallback配置；
3. 若API请求404，检查后端接口路径和MySQL查询逻辑。

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