前端axios调用Express接口出现undefined路径导致404报错问题求助

• 前端环境变量process.env.BASE_FRONT_URL未正确注入：虽然你注释中标记该变量值为http://localhost:8010，但实际运行时如果环境变量配置不符合框架要求、变量名拼写错误或配置文件未加载，会导致该变量取值为undefined。此时axios会将相对请求路径拼接在当前页面地址后，如果当前页面路由存在/undefined/段，就会出现报错中的路径。
• 后端路由前缀配置异常：如果你在express主入口文件中注册tip路由时，传入的前缀变量取值为undefined（比如前缀读取自未定义的环境变量），会导致后端实际暴露的接口路径为/undefined/post-tip，前端请求路径不匹配就会返回404。

前端侧修改 #

1. 验证环境变量取值：在axios实例创建代码后新增打印语句，确认process.env.BASE_FRONT_URL的实际运行值：

const api = axios.create({
  baseURL: `${process.env.BASE_FRONT_URL}`,
})
console.log('实际baseURL：', process.env.BASE_FRONT_URL)

如果输出为undefined，按以下规则修复：

• 检查.env类配置文件中是否正确声明了该变量
• 确认符合框架的环境变量前缀要求：Vite项目自定义环境变量必须以VITE_开头，Create React App项目必须以REACT_APP_开头，不符合前缀的变量不会被注入到前端代码中。

2. 调整请求路径写法，避免相对路径拼接异常：给请求路径开头添加斜杠，强制指定为根路径：

const { data } = await api.post(`/post-tip`, payload);

后端侧修改 #

1. 检查路由注册配置：打开express主入口文件（通常是app.js/index.js），确认tip路由的前缀配置正确，不要使用未定义的变量作为前缀：

const tipRouter = require('./routes/tipRouter')
// 错误写法：使用未定义的环境变量作为前缀
// app.use(process.env.API_PREFIX, tipRouter)
// 正确写法：写死前缀，或者给变量设置兜底默认值
app.use(tipRouter) // 不需要统一前缀的写法
// 或者需要统一前缀的写法：app.use('/api', tipRouter)

2. 调整路由路径写法：给路由路径开头添加斜杠，避免拼接异常：

router.post('/post-tip', tipController.postTip);

注意：如果后端给路由配置了统一前缀（比如/api），前端请求路径需要同步加上对应前缀，例如改成/api/post-tip。

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