React对接Node.js后端请求/posts返回404错误如何解决

核心问题1：代理配置未生效 #

从报错信息可见，请求直接发到了React开发服务器的http://localhost:3000/posts，没有被转发到Node.js服务的5000端口，所以返回404，常见触发原因：

• package.json存在语法错误：你贴出的proxy配置片段有多余的]和}符号，JSON语法错误会导致代理配置不被识别，先校验package.json的语法合法性，把proxy字段放在顶层配置中
• 配置后未重启React服务：package.json中的proxy配置修改后，必须重启React开发服务器才能生效
• 项目框架差异：如果是用Vite搭建的React项目，package.json的proxy配置本身不生效，需要在vite.config.js中单独配置代理规则：

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
})

核心问题2：路径前缀冲突 #

当前代理配置和后端路由的前缀存在逻辑冲突：

• 前端请求/posts，代理配为http://localhost:5000/api，转发后的完整地址为http://localhost:5000/api/posts
• 后端路由配置为app.use("/api/posts", postRoute)，如果你的posts路由文件里的根接口是GET /，刚好和转发地址匹配；如果路由文件里的接口还有额外前缀，就会返回404

推荐修复方案 #

方案1（符合通用接口规范） #

1. 修改package.json的proxy配置为："proxy": "http://localhost:5000"
2. 修改React代码中的请求路径为：axios.get("/api/posts")
3. 重启React开发服务器
   该方案下请求会直接转发到http://localhost:5000/api/posts，和你现有后端路由完全匹配。

方案2（无需修改前端请求路径） #

1. 保留现有proxy配置不变
2. 修改后端路由配置为：app.use("/posts", postRoute)
3. 重启Node.js服务和React开发服务器

额外注意事项 #

你当前的请求逻辑只打印了返回结果，没有把数据存入state，后续要渲染posts列表的话，需要把请求逻辑调整为：

const res = await axios.get("/api/posts")
setPosts(res.data)

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