后端运行时使用Axios调用API出现500内部服务器错误问题

首先排查最明显的路径问题 #

从报错信息看，请求的URL是http://localhost:8080/api/todos/todos，你的Axios配置存在路径拼接冗余问题：

• baseURL已设置为http://localhost:8080/api/todos
• getTodos()方法又追加了/todos路径

两者拼接后形成了不符合后端路由的冗余路径，这是导致错误的首要嫌疑。

修正方案二选一：

1. 调整baseURL到父级路径：

const apiClient = axios.create({
    baseURL: 'http://localhost:8080/api', 
    withCredentials: false,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json' 
    }
});

2. 或者修改getTodos()的请求路径：

getTodos() {
    return apiClient.get('/');
}

路径修正后仍报错的排查步骤 #

若调整路径后依旧出现500错误，问题出在后端服务内部，需执行以下检查：

• 查看后端服务器日志，500错误会包含具体异常栈信息（如数据库查询失败、空指针、路由未匹配等），这是定位核心问题的关键
• 用Postman或curl直接请求目标接口（如http://localhost:8080/api/todos），验证接口本身是否可正常响应
• 确认后端是否对该接口有认证/权限要求，若需token或会话信息，需在Axios请求头中添加对应字段
• 检查后端路由配置，确认存在匹配GET /api/todos的处理逻辑

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