声明
1. 首先我们应该知道，前端axios在本地发送的请求如果你不把路径写全，它都是会默认加上自己项目所在的端口，就比如说：
axios.get('/login')
axios.get('/hello')
当我点击发送按钮之后，以上两行代码实际为：
http://localhost:8080/login
http://localhost:8080/hello
其中 localhost:8080 就是自己项目所在的地址了。实际前端就会根据以上的地址来访问后端程序了。
2. 跨域，什么是跨域呢？
首先，明白什么是同源策略？同源就是指 协议、域名、端口 都要相同，其中任何一个不同都会出现跨域。例如：
http://www.baidu.com:8000
// http 是协议
// www.baidu.com 是域名
// 8000 是端口
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
这里说明一下，无法跨域是浏览器对于用户安全的考虑。是浏览器的锅。
同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去。
前后端分离的模式下，前后端的域名是不一致的，所以就会出现跨域问题。
问题
当我们开发完前端一个功能之后，需要运行调试 ，通常前后端分离情况下，两套程序都运行起来之后，肯定会出现 协议、域名、端口不一致的形况吧。
那么前端调用后端接口时就会产生跨域问题。怎么办呢？就需要代理（proxy）出场了。
跨域的解决方案
解决跨域的方案有很多，比如：jsonp、cors、Node代理、nginx反向代理。这里我们只讨论 proxy。
vue中的proxy就是利用了Node代理。
代理服务器是如何解决跨域的？
这样就可以串通了，前端通过axios发送请求时，会默认发送给本地的特性，来发送给前端配置的代理，代理根据特定规则，将地址转换为后端的接口，并请求后端接口，这样就解决了跨域的问题了。那前端vue中怎样配置代理服务器呢？
proxy配置
假如我现在想请求后端的 一个接口 例如：http://www.aaabbbccc.com/login ，这样我们应该怎样配置代理服务器呢？
以vue cli3.0为例：
// vue.config.js
devServer: { //开启代理服务器
proxy:{
"/api": { // /api是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会走到代理来。
target: "http://www.aaabbbccc.com", // 需要代理的域名，目标域名，会替换掉匹配字段之前的路径
ws: false, // 是否启用websockets
changeOrigin: true, //是否跨域
pathRewrite: { //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
"^/api": ""
}
},
},
}
//vue cli2 .0 的放在 config文件夹中的index.js 中
dev: {
proxyTable:{
"/api": {
target: "http://www.aaabbbccc.com", // 需要代理的域名
ws: false, // 是否启用websockets
changeOrigin: true, //开启跨域
pathRewrite: { //重写请求路径上匹配到的字段，如果不需要在请求路径上，重写为""
"^/api": ""，
}
},
},
}以上配置中，我配置了一个 /api，只有包含这个请求的路径才会走代理，例如：
http://localhost:8080/api/login //这个就可以走代理
http://localhost:8080/login //这个就不行
可以看到，要想所有的请求都进入代理中，就必须包含/api这个路径，那么我可以对axios进行二次封装，给所有的请求加这个前缀，代码如下：
const requests = axios.create({
baseURL:'/api', // 设置通用请求的地址前缀
timeout:10000 //请求超时的时间
});
export default requests //将requests实例，对外进行暴露发送请求可以写为：
requests.get('/login').then((response) => {})
requests.get('/getlist').then((response) => {})
requests.get('/user/hello').then((response) => {})此时我发送的请求就是：
http://localhost:8080/api/login
http://localhost:8080/api/getlist
http://localhost:8080/api/user/hello
通过代理的 target属性 加工之后就是 ：
http://www.aaabbbccc.com/api/login
http://www.aaabbbccc.com/api/getlist
http://www.aaabbbccc.com/api/user/hello
就是把 /api 之前的路径 修改成了 target里配置的 目标服务器的路径。
在通过 pathRewrite属性 将 /api 替换为空 为：
http://www.aaabbbccc.com/login
http://www.aaabbbccc.com/getlist
http://www.aaabbbccc.com/user/hello
这样就可以访问到后端的对应接口了。
