我们在发送数据请求的时候经常会遇到跨域的情况。
如：我们使用axios向http://localhost:5000/test端口发送请求，结果跨域了：
解决跨域请求有如下几种方式：后端设置cors，jsonp，vue-cil配置代理。
配置代理可以理解为Vue为你开了一台和你端口号相同的服务器，将浏览器和服务器之间的通话转化为服务器与服务器之间进行通话。
一、方式一
（一）配置代理服务器
在vue.config.js文件下配置代理服务器：
devServer: {
proxy:'xxx' // 服务器端口
}
注意：这里的端口是目标访问服务器的端口号
（二）发送axios请求
发送axios请求的端口号为本机端口号：
以上步骤完成后即可解决请求跨域问题
（三）使用该方式的缺点
-
不能配置多个代理。
-
不能灵活地控制该请求是否走代理。
二、方式二
（一）配置代理服务器
如果使用该写法，就能够配置多个代理服务器，还能灵活控制是否走代理。
在vue.config.js中配置代理服务器：
devServer: {
proxy: {
// 配置所有以 '/api1' 开头的请求路径
'/api1': {
target: 'xxx', // 代理目标的端口路径
pathRewrite: { '^/api1': '' }, // 替换请求路径中的字符
changeOrigin:true // 是否更改配置代理服务器的端口号
},
// 配置所有以 '/api2' 开头的请求路径
'/api2': {
target: 'xxx',
pathRewrite: { '^/api1': '' },
changeOrigin:true
},
}
}
（二）发送axios请求
注意：要在发送的请求路径后添加在配置代理中设置的 '/api'
通过哪个配置代理服务器发送请求就添加设置的哪个api
