目录
步骤1，在main.js 入口文件中，把 axios 的请求根路径改造为当前web 项目的根路径：编辑
步骤2，在项目根目录下创建vue.config.js 的配置文件，并声明如下的配置：编辑
一、全局配置axios
1. 为什么要全局配置 axios
在实际项目开发中，几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题：
① 每个组件中都需要导入 axios（代码臃肿）
② 每次发请求都需要填写完整的请求路径（不利于后期的维护）
2. 如何全局配置 axios
在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios，示例代码如下：
3. 在 vue3 的项目中全局配置axios
4. 在 vue2 的项目中全局配置 axios
需要在main.js 入口文件中，通过Vue 构造函数的prototype 原型对象全局配置 axios：
二、axios 拦截器
1. 什么是拦截器
拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。
应用场景：
① Token 身份认证
② Loading 效果
③ etc…
2. 配置请求拦截器
通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下：
注意：失败的回调函数可以被省略！
2.1 请求拦截器 – Token 认证
2.2 请求拦截器 – 展示 Loading 效果
借助于element ui 提供的 Loading 效果组件
（https://element.eleme.cn/#/zh-CN/component/loading） 可以方便的实现 Loading 效果的展示：
3. 配置响应拦截器
通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下：
注意：失败的回调函数可以被省略！
3.1 响应拦截器 – 关闭 Loading 效果
调用 Loading 实例提供的close() 方法即可关闭 Loading 效果，示例代码如下：
展示Loading效果实战示例：
// 配置请求拦截器
let loadingInstance = null
axios.interceptors.request.use((config) => {
// 展示Loading界面
loadingInstance = Loading.service({ fullscreen: true })
return config
})
// 响应拦截器
axios.interceptors.response.use((response) => {
loadingInstance.close()
return response
})
三、proxy 跨域代理
1. 接口的跨域问题
vue 项目运行的地址：http://localhost:8080/
API 接口运行的地址：http://www.escook.cn/api/users
由于当前的 API 接口没有开启 CORS 跨域资源共享，因此默认情况下，上面的接口无法请求成功！
2. 通过代理解决接口的跨域问题
通过vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：
① 把 axios 的请求根路径设置为vue 项目的运行地址（接口请求不再跨域）
② vue 项目发现请求的接口不存在，把请求转交给proxy 代理
③ 代理把请求根路径替换为devServer.proxy 属性的值，发起真正的数据请求
④ 代理把请求到的数据，转发给 axios
3. 在项目中配置 proxy 代理
步骤1，在main.js 入口文件中，把 axios 的请求根路径改造为当前web 项目的根路径：
步骤2，在项目根目录下创建vue.config.js 的配置文件，并声明如下的配置：
注意：
① devServer.proxy 提供的代理功能，仅在开发调试阶段生效
② 项目上线发布时，依旧需要API 接口服务器开启 CORS 跨域资源共享