Vue中Axios GET请求遇Uncaught (in promise) ERR_BAD_REQUEST错误求助

云原生阿岚

2026-8-2

Axios ERR_BAD_REQUEST 错误排查方案

你的请求代码：

axios.get('localhost:3000/api/event')
    .then((response) => {
        console.log(response);
    });

针对你遇到的ERR_BAD_REQUEST错误，按以下步骤排查：

补全请求协议头
直接写localhost:3000/api/event会被浏览器解析为相对路径，拼上当前页面域名后导致请求地址错误。必须在URL前加上http://或https://，修改为：
```
axios.get('http://localhost:3000/api/event')
    .then((response) => {
        console.log(response);
    });
```
检查跨域配置
Postman不受浏览器同源策略限制，但前端请求会被拦截。需要确认服务器是否配置了CORS响应头（如Access-Control-Allow-Origin），或者在Vue项目中配置开发代理：
在vue.config.js中添加：
```
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}
```
之后请求可以简化为axios.get('/api/event')。
添加错误捕获并检查请求细节
原代码未捕获错误，无法获取详细报错信息。修改代码打印完整错误内容，定位具体原因：
```
axios.get('http://localhost:3000/api/event')
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.error('请求错误详情:', error.response?.data || error.message);
    });
```
同时对比Postman的请求头，确保Axios的请求头（如Content-Type）与Postman一致，必要时手动指定请求头。
校验路径与端口
再次确认请求路径、端口与Postman中使用的完全一致，部分服务器路由区分大小写，需严格匹配。