全局配置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）会在每次发起 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 跨域资源共享
全局配置axios、axios 拦截器 和 proxy 跨域代理相关推荐
- vue3.0-axios拦截器、proxy跨域代理
目录 1. vue-cli 1)vue-cli 2)安装vue-cli ①解决Windows PowerShell不识别vue命令的问题 3)创建项目 4)基于vue ui创建vue项目 5)基于命令 ...
- SpringBoot中配置拦截器时，跨域失效
SpringBoot中配置拦截器时,跨域失效 前后段分离的项目,配置了跨域后,访问正常,但是配置了拦截器以后,有的访问正常,有的出现跨域问题,发现出现跨域问题的都是拦截器里面没有放行的请求. @Con ...
- Spring Boot——Spring Security环境下跨域addCorsMappings与拦截器冲突导致跨域失效解决方案
问题分析 [SpringMVC]与权限拦截器冲突导致的Cors跨域设置失效问题 解决方案 @Beanpublic CorsFilter corsFilter() {//1.添加CORS配置信息Cors ...
- uniapp 配置proxy 跨域代理
1.在manifest.json 文件中的 devServer添加: "devServer" : {"https" : false,"proxy&qu ...
- Vue配置axios响应拦截器
一个项目会发送很多请求到后端,每个请求都有如下的响应 不想每个请求都去判断里面的status,那么可以使用axios的响应拦截器,对服务端返回的一些相同点做统一的处理 比如说如果有报错,就统一弹出这么 ...
- axios的拦截器（Interceptors）
axios 的拦截器:interceptors 如果我们想在请求之前做点什么,用拦截器再好不过了 拦截器一般做什么? 1. 修改请求头的一些配置项 2. 给请求的过程添加一些请求的图标 3. 给请求添 ...
- axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios
目录 axios 的理解和应用 axios 特点: 使用 axios 发 ajax请求 1. 发送 GET 请求 axios get完整版: axios get精简版: axios get请求发送时携 ...
- axios 请求拦截器响应拦截器
一. 拦截器介绍 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器 在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
- 借助axios的拦截器实现Vue.js中登陆状态校验的思路
在做Vue中的登陆校验时,思路应该是这样的:先确定一个路由页面是否需要登陆才能访问,如果需要,就需要用户登陆,如果不需要,用户直接可以访问. 那么,首先来说,后台系统中,不一定每一个页面都要进行登陆权 ...
最新文章
- Dubbo负载均衡与集群容错
- 解析Python中的线程与进程
- android实现日志列表,【Android开发】listview+popupwindow实践：日志列表
- mysql s.`name`_MySQL的基础操作命令
- ubuntu下安装PCL并测试（含视频安装过程记录）
- 撰写项目的解决方案要点解析
- win pxe安装linux,windows系统架设PXE+TFTP+HTTP安装CentOS 4.7 体验
- Python笔记 ：科赫雪花曲线(计算思维训练1)
- Windows 清除DNS缓存C++实现
- e admin admin.php,EAdmin极简社区源码
- Java程序员从笨鸟到菜鸟之（五十七）细谈Hibernate（八）Hibernate集合Map关系映射
- 微信好友突破10000人，节跳动即将取消饮料补贴福利！！
- 小程序影藏溢出的gif_视频转gif怎么弄?视频片段转动图 将影视片段制作成微信表情包的方法~...
- php phpexcel 内容靠最右边_PHPExcel的使用小结，不够全面，只是应对当前我用到的地方做了笔记，日后再有新的需求还会随时修改...
- （78）--用框架爬取招聘信息
- 考研英语一历年真题写作(小作文+大作文)自己练习与背诵
- 练习作业5： 韩信点兵 ， 统计方案 ， 出现最频的数
- Moore Voting
- @import 错误用法
- c语言 链表 无头结点,C++ 单链表（无头结点）