Vue+Axios构建SPA时CORS场景下400响应异常及日志重复问题

嘿，我来帮你搞定这个问题！你遇到的是跨域场景下的双重问题——服务器返回400错误的同时，CORS配置也没跟上，导致浏览器日志重复报错。

为什么日志会重复打印？ #

当你的前端发送跨域请求时，如果服务器返回400（Bad Request），但没有在错误响应里带上Access-Control-Allow-Origin头，浏览器会触发两次错误日志：

• 第一次是请求本身的400错误
• 第二次是浏览器的CORS拦截错误（因为缺少允许跨域的响应头）
  这就是你看到日志重复的核心原因。

第一步：先解决CORS核心问题 #

不管服务器返回成功还是错误响应，都必须在响应头中包含Access-Control-Allow-Origin（可以指定你的前端域名http://localhost:8080，生产环境不建议用*允许所有来源）。

举几个常见后端框架的配置例子：

• Node.js/Express：用cors中间件，确保它在所有路由之前加载，这样所有响应都会带上CORS头：

  const cors = require('cors');
  app.use(cors({ origin: 'http://localhost:8080' }));
  

• Django：在settings.py里配置CORS_ALLOWED_ORIGINS，并确保django-cors-headers中间件在CommonMiddleware之前：

  INSTALLED_APPS = [
      # ...
      'corsheaders',
  ]
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # ...
  ]
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:8080",
  ]
  

第二步：排查400错误的具体原因 #

等CORS问题解决后，你就能通过Axios的错误回调拿到服务器返回的详细错误信息了。修改你的Axios请求代码，在catch里打印完整的错误响应：

axios.post('http://dev.sportx.one/api/token/', yourRequestData)
  .then(res => {
    // 处理成功逻辑
  })
  .catch(err => {
    if (err.response) {
      // 服务器返回了响应，包括400状态码
      console.log('服务器返回的错误详情:', err.response.data);
      console.log('状态码:', err.response.status);
    } else if (err.request) {
      // 请求发出去但没收到响应
      console.log('请求未收到响应:', err.request);
    } else {
      // 请求配置时出错
      console.log('请求配置错误:', err.message);
    }
  });

通常400错误是因为请求参数不符合要求，比如缺少字段、格式错误（比如JSON格式不对）、token无效等，看服务器返回的data就能快速定位问题。

开发环境临时绕过CORS的小技巧 #

如果是本地开发阶段，你也可以用Vue的开发服务器代理来绕过跨域问题，不用改后端配置。在项目根目录的vue.config.js里添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://dev.sportx.one',
        changeOrigin: true, // 模拟目标服务器的域名，避免CORS拦截
        pathRewrite: { '^/api': '/api' } // 路径重写，确保请求路径正确
      }
    }
  }
};

之后前端请求就改成axios.post('/api/token/', ...)，开发服务器会帮你把请求代理到目标服务器，这样就不会有跨域问题了。不过生产环境还是必须依赖后端的CORS配置哦。

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