Axios 404错误求助：Express路由与前端请求路径不匹配问题

问题原因 #

后端路由明确挂载在/api/abiturients路径下，但前端请求的是http://localhost:5000/abiturients，缺少了/api前缀，导致后端找不到对应的路由处理逻辑，直接返回404错误。

解决方案 #

方案1：直接修改单个请求路径

在前端src/services/api.js中，给请求路径补上/api前缀：

// 修改前
axios.get('http://localhost:5000/abiturients')

// 修改后
axios.get('http://localhost:5000/api/abiturients')

方案2：配置Axios全局baseURL（更推荐）

如果项目中有多个接口都需要/api前缀，建议统一配置Axios的baseURL，避免重复编写前缀：

// src/services/api.js
import axios from 'axios';

// 创建Axios实例并设置baseURL
const api = axios.create({
  baseURL: 'http://localhost:5000/api'
});

// 后续请求只需写相对路径，自动拼接baseURL
api.get('/abiturients') // 实际请求路径为 http://localhost:5000/api/abiturients

验证 #

修改完成后，重启前后端服务，重新发起请求即可命中后端的/api/abiturients路由，解决404问题。

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