一、什么是跨域
1.1 跨域
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
1.2 同源策略
是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
1.3 为什么出现跨域
后端代码在A服务器上启动，前端代码在B电脑上启动，此时就会出现跨域。 服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题）
二、配置axios代理解决跨域（纯前端解决跨域问题）
解决跨域问题思路：
我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据。
2.1 配置baseUrl
// main.js
import axios from 'axios'
Vue.prototype.$axios = axiosd
axios.defaults.baseURL = '/api'
复制代码
说明：axios.defaults.baseURL = '/api'作用是每次发送请求都会带一个/api的前缀
2.2 配置proxy
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: '//111.222.333.444:8888',// 你要请求的后端接口ip+port
changeOrigin: true,// 允许跨域，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
ws: true,// 开启webSocket
pathRewrite: {
'^/api': '',// 替换成target中的地址
}
}
}
}
}
复制代码
2.3 组件中发送请求
// 原接口url：http://111.222.333.444:8888/test
// 原请求写法：this.$axios.get('http://111.222.333.444:8888/test')
// 配置proxy代理后请求写法
this.$axios.get('/test')
复制代码
原理说明：我们请求/test，就相当于请求了：localhost:8080/api/test，然后配置的proxy拦截了/api，并把/api以及前面的所有替换成了target的内容，因此实际请求的url是http://111.222.333.444:8888/test
2.4 重启vue项目，已经解决跨域问题
注：在浏览器的调试工具中，proxy代理后的请求url会变更显示为
http://localhost:8080/api/test，且不会显示代理前的请求链接
