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+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue动态绑定style样式
Apr 20 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
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
laravel学习教程之存取器
2016/07/30 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
浅入深出Vue之自动化路由
2019/08/06 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python实现批量压缩图片
2018/01/25 Python
python如何让类支持比较运算
2018/03/20 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
基于python3的socket聊天编程
2020/02/17 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
大专学生求职信
2014/07/04 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL