前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-

完整报错如下：

 

Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://localhost:8081/login net::ERR_FAILED 500

createError.js?e648:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js?e648:16)
    at XMLHttpRequest.handleError (xhr.js?b9e2:117)

错误原因：

本人的项目是Vue+SpringBoot前后端分离的，前后端项目启动的端口号不一样，因此域名不一样，产生跨域问题导致。

解决办法：

方法一：

在后端接口上加注解：

@CrossOrigin(origins = "*",maxAge = 3600)

不过这样需要在每一个访问接口上都要加这条注解，比较麻烦，推荐采用方法二。

方二一：

在前端项目的src目录下新建代理配置文件vue.config.js

let proxyObj = {};

proxyObj['/'] = {
  //websocket
  ws: false,
  //目标地址
  target: 'http://localhost:8081',
  //发送请求头中host会设置成target
  changeOrigin: true,
  //不重写请求地址
  pathRewrite: {
    '^/': '/'
  }
};

// websocket的代理

proxyObj['/ws'] = {
  ws: true,
  target: 'ws://localhost:8081'
};

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  },
  configureWebpack: {
    devtool: 'source-map'
  }
};

本人采用第二种方法，完美解决问题！