Axios代理配置及封装响应拦截处理方式


Posted in Vue.js onApril 07, 2022

Axios代理配置及响应拦截处理

Axios是vue官方推荐的异步处理方案,所以在几个vue的项目里,都用到了,所以这里写一下Axios的代理配置和响应拦截处理

代理配置

代理主要是为了解决跨域问题,但是现在常规解决跨域的方式,就是让后端配置响应头,使用cors方式跨域前端基本不需要任何处理。

但是有时候后端比较懒,就需要前端通过代理请求完成跨域,其实就是相当于在本地开了一个服务器,通过服务器进行向另一个服务器的代理请求。

但是这样又会产生一定问题,就是再部署到服务器上时,前端项目也必须设置代理,或者直接和后端项目部署同源环境

下面是代理请求的配置:

//config/index.js 文件里
module.exports = {
     dev{
        proxyTable: {
          '/': { //将开头为 ‘/'的接口替换
            target: 'http://www.hahaha.com/',  //导向这个地址
            changeOrigin: true,
            ws:true,
            pathRewrite: {
              '^/': ''    //将开头的斜杠去掉
            }
          },
          '/ws/**': {   //因为项目中用到了websocket 所以这里还配置websocket的代理
              target: 'ws://www.hahaha.com',
              ws: true,
              secure: false,
              logLevel: 'debug',
          }
      }
      ...
    }
   host: '0.0.0.0', //这里顺便一提,把host改成'0.0.0.0‘后可以让局域网内的电脑直接访问项目,默认是localhost
    ...
}

响应内容拦截处理

因为我们的axios请求响应会将网络请求信息的状态码返回,而通常我们实际运用中不是很需要这样的内容,为了方便我们可以进行统一处理,最后只返回真正的实际内容。

同时我们希望虽然网络请求成功,但是如果请求的内容失败的话,也会流转到catch步骤,也就是捕获错误

代码如下

const http = axios.create({
  baseURL: 'api/',
  timeout: 20000,
});   //创建axios对象
//对axios对象响应的拦截处理
http.interceptors.response.use((response) => {
//进入这里代表请求成功,网络请求状态码是200,但是我们要对请求的内容是否成功进行判断
  if (response.data.ErrorCode !== 0) {   //因为我们项目里设定0代表请求成功,所以非零的我们都会直接reject
    return Promise.reject(response.data);
  }   
  return Promise.resolve(response.data); //ErrorCode为0的直接返回response.data将网络的状态码直接过滤掉
}, (error) => {
//进入这里都网络状态码非200的,可能是因为接口错误,也可能是没有token等原因
  if(error.constructor.prototype.name == "Error") {  //这里判断返回的是否是错误对象,如果是的说明是网络请求错误
    Message({ showClose: true,
      message: '网络链接问题或登陆失效!',
      type: 'error'})
    return new Promise(() => {}) //这里我们可以进行链式异步处理
  }
  return error.data;//其他请求,说明是因为请求内容错误了,直接返回错误内容
});
//处理前返回内容
{
    status: 200
    statusText: "OK",
    data{
        ErrorCode: 0,
        token:'xxxx',
        name:'xxxx'
    }
}
//处理后返回内容
{
    ErrorCode: 0,
    token:'xxxx',
    name:'xxxx'
}

Axios的proxy代理配置解析

proxy实际上是一种前端开发中方便开发用的东西,它在本地可以跨域访问其他的网站,但是当页面打包之后,proxy就会失效

我是在vue.config.js中设置proxy的,代码如下

    proxy: {
      //匹配到的路径
      "/api": {
        target: "XXXXXXXXX", //目标主机地址
        changeOrigin: true,//是否启动代理
        pathRewrite: {    //重写路径
          "^/api": ''    //如果遇到前缀为'/api'的url,将它重写为''
        }
      }
    }

举个例子: 

proxy的target设置成http://www.web-jshtml.cn/aaa

如果你想访问http://192.168.1.114:8080/api/,这时候,你碰到了/api,你需要将/api前边的域名转换为target的地址,即

将http://192.168.1.114:8080转换为http://www.web-jshtml.cn/aaa

即是

http://www.web-jshtml.cn/aaa/api/这个地址,但是因为proxy的pathRewrite里需要将'/api'转换为空字符串,所以最终的访问地址是

http://www.web-jshtml.cn/aaa

直接上文档,文档里有详细资料

Axios代理配置及封装响应拦截处理方式

Axios代理配置及封装响应拦截处理方式

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
vue实现拖拽交换位置
Apr 07 #Vue.js
Vue.Draggable实现交换位置
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
vue cli4中mockjs在dev环境和build环境的配置详情
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 #Vue.js
vue3使用vuedraggable实现拖拽功能
You might like
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
javascript动态加载二
2012/08/22 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
Vue全局分页组件的实现代码
2018/08/10 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
详解Python中的type和object
2018/08/15 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python实现飞机大战项目
2020/03/11 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
python实现画图工具
2020/08/27 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
单位办理社保介绍信
2014/01/10 职场文书
四年级语文教学反思
2014/02/05 职场文书
多媒体教室标语
2014/06/26 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
2014年关工委工作总结
2014/11/17 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
吃通javascript正则表达式
2021/04/21 Javascript
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis