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实现增删改查的示例源码
Nov 23 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
turn.js异步加载实现翻书效果
2019/07/25 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
原生JS实现留言板
2020/03/26 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
通过自学python能找到工作吗
2020/06/21 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
Android interview questions
2016/12/25 面试题
.NET程序员的几道面试题
2012/06/01 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
自我鉴定总结
2014/03/24 职场文书
政协会议宣传标语
2014/10/09 职场文书
2014年学前班工作总结
2014/12/08 职场文书
员工年度工作总结2015
2015/05/18 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js