控制台报跨域的错的时候，后端已经接收到请求并进行响应了只是浏览器对响应内容进行了拦截了。
意思就是不允许js对远程的网站发送请求。
解决办法就是让它们处于同一个域。
知道了产生的原因就知道为什么那样解决了
有一个条件不同，我们都可以理解为存在跨域问题。
vue-cli2 方案
如果我们使用的 vue-cli2 来创建的 SPA 应用，创建成功之后，在项目的 config 目录下有一个 index.js 文件，在这个文件中，我们可以进行请求转发配置，如下图：
配置内容如下：
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/': {
target: 'http://localhost:8082',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
},
'/ws/*': {
target: 'ws://127.0.0.1:8082',
ws: true
}
},
...
}
proxyTable 就是我们配置的转发路由表。这个里边我们一共配置了两个规则：
第一个是拦截所有 HTTP 请求，将之转发到后端服务器上（前端默认端口是 8080），后端的端口是 8082。至于拦截规则 / ，大家可以自定义，根据实际情况来写，例如所有的 HTTP 请求都有一个统一的前缀 api，那么这里就可以写 /api。
第二个是拦截所有的 websocket 请求进行转发，我这里给所有的 websocket 请求取了一个统一的前缀 /ws
如果你有更多的拦截规则，继续在这里配置就可以了，这些配置只会在开发环境下生效，当项目编译打包时，这些配置是不会打包进去的，也就是说，项目发布的时候，这些配置是失效的，这个时候我们通过 Nginx 或者将前端代码拷贝到后端，就可以解决生产环境下的跨域问题了（相当于开发时候的跨域在生产环境下不存在）。
相对来说，vue-cli2 在这里的配置还比较容易。
vue-cli3 方案
vue-cli3 去年出来后，当时就尝了一把鲜，但是可能 vue-cli2 用久了，一时半会还不愿意接受 vue-cli3 ，于是尝鲜完了之后就放下了，没怎么用了。直到前两天，新项目尝试了一下 vue-cli3，结果在请求转发这块就掉坑里了。
一开始没多想，还是 vue-cli2 里边的老办法，只不过是在 vue-cli3 创建的项目的 vue.config.js 文件中进行配置，文件位置如下图：
注意，使用 vue-cli3 创建的 SPA 应用，没有 config 目录了，因此请求转发的配置我们要在 vue.config.js 这个配置文件中来配置。
一开始我直接把 vue-cli2 中的请求转发配置拷贝过来，这样发送 HTTP 请求倒是没问题，但是 websocket 请求一直有问题，后来经过仔细分析，发现这两者在请求转发配置上有一点点差异，我们来看看 vue-cli3 中的请求转发配置(这也是我这里 vue.config.js 文件的完整内容)；
let proxyObj = {};
proxyObj['/ws'] = {
ws: true,
target: "ws://localhost:8081"
};
proxyObj['/'] = {
ws: false,
target: "http://localhost:8081",
changeOrigin: true,
pathRewrite: {
'^/': ''
}
};
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: proxyObj
}
}
首先我们创建一个 proxyObj 用来放各种代理对象，至于代理的内容这里的则和 vue-cli2 中的没有太多差异。要注意的是，HTTP 请求代理中，多了一个属性 ws: false，用过 vue-cli3 同学可能发现了，如果不加这个属性，浏览器控制台会一直报连不上 socket 的错，加上就没事了。
最后在 devServer 中指定项目的 host 和 port ，然后再配置一下 proxy 对象就可以啦。
这就是我们在 vue-cli3 中请求的配置。
不过这里的配置老实说没有什么难度，做过一次就会啦，要是没做过，头一次可能得折腾半天。
前后端分离如何解决跨域问题：https://wangsong.blog.csdn.net/article/details/100418453