React MERN栈项目请求后端接口报404 Not Found如何解决

问题基础信息 #

• 运行环境：Windows 10
• 技术栈：MERN Stack
• 前端服务监听端口：localhost:3000
• 后端服务监听端口：localhost:5000
• 故障表现：点击注册按钮提交表单后页面无响应，前端控制台抛出错误Failed to load resource: the server responded with a status of 404 (Not Found)，网络面板显示实际发起的请求路径为http://localhost:3000/%22http://localhost:5000%22/api/auth/signup
• 已尝试操作：调整socket.io的CORS配置、硬编码请求地址，均未解决问题

已校验通过的配置项 #

后端侧 #

• .env文件已配置PORT=5000、MongoDB连接串、JWT相关参数
• config.js已配置端口、数据库连接、JWT参数的兜底默认值
• Express入口文件已配置CORS跨域、express.json请求体解析中间件，路由挂载规则符合预期：
  • /api/auth 指向Auth路由模块
  • /api/user 指向User路由模块
  • /api/post 指向Post路由模块
• 服务集成socket.io能力，启动后MongoDB数据库连接正常
• Auth路由模块中明确定义POST /signup接口处理注册逻辑

前端侧 #

• 项目依赖已完整安装，包含axios、socket.io-client
• 注册逻辑中曾尝试硬编码后端接口地址，问题复现

根因定位 #

错误请求路径中的%22是URL编码后的双引号字符，且请求被默认发送到前端服务所在的3000端口，核心原因是前端环境变量配置格式错误：
前端.env中写的REACT_APP_ENDPOINT = "http://localhost:5000"给值加了外层双引号，CRA（Create React App）读取环境变量时会将等号后的所有非注释内容作为变量值，双引号不会被自动解析去除，最终读取到的process.env.REACT_APP_ENDPOINT实际值为"http://localhost:5000"（前后携带冗余双引号）。axios拼接请求地址时，带引号的地址不符合绝对路径规则，会被识别为相对路径拼接到当前前端域名下，才会出现路径中带编码引号、请求发往3000端口的问题。
硬编码地址仍报错的大概率原因是修改代码/环境变量后未重启前端开发服务，CRA仅在服务启动阶段加载一次环境变量，运行中修改.env不会热更新。

修复步骤 #

1. 修改前端.env文件，去掉环境变量值外层的双引号，同时去掉等号两侧的多余空格（非必须但可避免格式解析问题）：

# 错误配置
# REACT_APP_ENDPOINT = "http://localhost:5000"
# 正确配置
REACT_APP_ENDPOINT=http://localhost:5000

2. 完全停掉当前运行的前端开发服务，重新执行npm start启动，确保新的环境变量被加载。
3. 检查请求代码，确认地址拼接无多余字符，参考写法：

// 注册接口请求逻辑
const { data } = await axios.post(`${process.env.REACT_APP_ENDPOINT}/api/auth/signup`, registerForm)

4. 验证：打开浏览器开发者工具网络面板，触发注册操作，确认请求地址为http://localhost:5000/api/auth/signup，无多余编码字符即可。

兜底排查项 #

如果完成上述操作后问题仍存在，依次检查以下配置：

• 确认后端5000端口未被其他程序占用，后端启动日志无端口冲突报错
• 确认后端路由挂载顺序正确，没有在路由注册前添加全局404拦截逻辑
• 确认axios实例没有配置重复的baseURL，避免地址被多次拼接
• 确认浏览器没有装强制HTTPS、请求拦截类插件篡改请求地址

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