全局配置axios、axios 拦截器 和 proxy 跨域代理

 

目录

一、全局配置axios

1. 为什么要全局配置 axios

2. 如何全局配置 axios

3. 在 vue3 的项目中全局配置axios

​

4. 在 vue2 的项目中全局配置 axios

二、axios 拦截器

1. 什么是拦截器

2. 配置请求拦截器

2.1 请求拦截器 – Token 认证 

2.2 请求拦截器 – 展示 Loading 效果

3. 配置响应拦截器

3.1 响应拦截器 – 关闭 Loading 效果

展示Loading效果实战示例：

三、proxy 跨域代理

1. 接口的跨域问题

2. 通过代理解决接口的跨域问题

3. 在项目中配置 proxy 代理

步骤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）会在每次