一、跨域产生的原因
浏览器发送请求的时候, 请求的地址和浏览器的 协议 域名 端口 不全相同 ，浏览器为了保护你的安全 , 就会报错提示
注意：并不是所有的跨域请求都会报错，比如普通的css请求和图片请求是不会报错的
跨域请求出现错误需要满足两个条件：
1.浏览器的同源策略
2.请求类型是ajax类型
二、解决方案
实际最佳解决方案：后端写代码(CORS)在响应中添加必要的响应头,让响应回来之后浏览器不报错
以下是暂时的权宜之计：
1.前端用JSONP方式去发请求(jsonp不是ajax请求)
2.服务器代理(webpack代理)
三、如何利用vue-cli设置代理转发
step1:在vue.config.js中添加以下配置：
module.exports = {
devServer: {
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
// http://localhost:9588/api/login -> http://线上的地址/api/login
'/api': {
target: 'http://我们要代理的真实接口地址'
}
}
}
}
}
step2: 删除基地址
const request = axios.create({
baseURL: '',
timeout: 5000
})
step3:修改配置文件之后重启项目看效果
注意：
1.如果后端已经做了跨域处理，前端就不用再做处理
2.代理转发只能在开发阶段使用，上线之后不再享受webpack server的服务就不能使用了
原理：
1.vue-cli脚手架工具在启动时，会开启一个前端项目的服务器，在同一局域网中的用户都可以通过ip地址来访问。
2.vue-cli脚手架支持配置一个代理： 将指定的类型请求，转发到目标服务器。
2.1代理服务和前端服务之间由于 协议 域名 端口 三者统一，不存在跨域问题，可以直接发送请求
2.2代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求
这样，我们就可以通过服务器代理做接口转发，在开发环境下解决跨域问题，因为vue-cli已经为我们内置了该技术，所有只需要按照以上步骤简单配置一下即可。
以下是图示理解：
