如何修复React应用从MongoDB拉取数据时出现404错误的问题

端口与跨域检查 #

• 确认后端服务监听端口与前端axios配置的请求端口一致：React默认启动端口为3000，若后端服务启动在其他端口（如5000），axios的baseURL必须明确指定后端端口，不可省略或错写
• 后端需先安装并引入cors中间件：执行npm install cors，在server.js所有路由配置前添加代码app.use(cors())，避免跨域被误判为404

路由匹配检查 #

• 前后端路由路径必须完全一致，包括大小写、前后斜杠：如后端配置app.get('/api/goods', ...)，前端请求路径不可写为/api/Goods或api/goods
• 路由定义顺序遵循「业务路由在前、全局404路由在后」的规则，避免404拦截规则优先命中业务请求
• 核对请求方法：后端配置GET路由则前端不可发送POST/PUT等其他类型请求，否则会返回404

服务有效性校验 #

• 后端服务启动后，直接在浏览器地址栏输入完整接口地址（如http://localhost:5000/api/xxx），若能正常返回数据则后端路由正常，问题定位在前端axios配置；若仍返回404则问题出在后端路由配置
• 若使用express.Router()拆分路由，确认挂载路由时的前缀与前端请求前缀匹配：如app.use('/api', goodsRouter)则前端请求必须带/api前缀

代理规则检查（使用create-react-app脚手架时适用） #

• 若在package.json中配置了proxy字段，值必须为后端服务完整地址（如"proxy": "http://localhost:5000"），此时前端axios请求仅需写路径/api/xxx即可，重复写域名会绕过代理规则导致404

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