在正式环境中，由于后台设置cros或者我们使用nginx反向代理，所以不需要考虑跨域问题，而在前端本地开发中会遇到跨域问题，所以我们可以通过设置proxy来进行跨域。
为什么需要跨域，这是因为浏览器有同源策略。
同源策略
- 同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源
- 如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击
- 同源策略限制：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送
- 跨域限制访问，其实是浏览器的限制，其实请求有发出去，对方服务器也有响应，只不过是被浏览器的同源策略拦下来
配置proxy
原理：
- 服务器和服务器直接没有同源策略，所以浏览器可以发给自己的服务端然后，由自己的服务端再转发给要跨域的服务端，做一层代理
而vue已经帮我们配置好了（使用到了http-proxy-middleware中间件），我们只需要设置一下proxy（vue3.x以前叫proxy table）
- 在根目录下新建vue.config.js
- 在vue.config.js中配置
module.exports = {
devServer: {
// 配置跨域代理
proxy: {
"/api": {//将http://baidui.com"映射为/api
target: "http://baidui.com",//需要代理的baserurl，目标地址
changeOrigin: true, //本地会虚拟一个服务端接收你的请求并代你发送该请求
pathRewrite: {
"^/api": "" //重写路径，比如将api/aa/bb重写为aa/bb
},
logLevel: "debug"//可以在终端打印日志
}
}
}
};
比如我们之前的接口地址是
http://baidui.com/aa/bb
现在我们只需要写成api/aa/bb即可
注意：本配置只在本地开发有效
