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

目录
  • Axios代理配置及响应拦截处理
    • 代理配置
    • 响应内容拦截处理
  • Axios的proxy代理配置解析

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • axios的拦截请求与响应方法

    比如发送请求显示loading,请求回来loading消失之类的 import Vue from 'vue' import App from './App.vue' import axios from 'axios' import Loading from './components/Loading' import stores from './store/store.js' axios不能use哦 // 请求拦截(配置发送请求的信息) axios.interceptors.request.us

  • Vue中axios的封装（报错、鉴权、跳转、拦截、提示）

    统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI 的 Message 组件 报错重定向: 路由钩子 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子 表单序列化: 我这边直接用 qs (npm模块),你有时间也可以自己写 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道 // 可以去了解npm的引入和es6引入

  • Vue封装Axios请求和拦截器的步骤

    PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project axios 是一个基于 promise 的 http 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库. axios很好用,其中之一就是它的拦截器十分强大,我们可以为请求和响应设置拦截器,比如请求拦截器可以在每个请求里加上token,做了统一处理后维护起来也方便,响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态.授权. 之前初学的时候,经常

  • axios使用拦截器统一处理所有的http请求的方法

    axios使用拦截器 在请求或响应被 then 或 catch 处理前拦截它们. http request拦截器 // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); http respones拦截器 // 添加响应拦截器 axio

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

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

    目录 Axios代理配置及响应拦截处理 代理配置 响应内容拦截处理 Axios的proxy代理配置解析 Axios代理配置及响应拦截处理 Axios是vue官方推荐的异步处理方案,所以在几个vue的项目里,都用到了,所以这里写一下Axios的代理配置和响应拦截处理 代理配置 代理主要是为了解决跨域问题,但是现在常规解决跨域的方式,就是让后端配置响应头,使用cors方式跨域前端基本不需要任何处理. 但是有时候后端比较懒,就需要前端通过代理请求完成跨域,其实就是相当于在本地开了一个服务器,通过服务器

  • 详解 Nginx 负载均衡和反向代理配置和优化

    Nginx 负载均衡和反向代理配置和优化 DNS 轮询方式: 介绍: DNS 轮询是指一个域名可以绑定到多个的 ip 服务器上, 用户在访问的时候 dns轮询访问这几个 ip 的服务器, 达到负载均衡的目的. 可以使用 linux 命令 dig domain 来查看情况. 缺点: 1. 可靠性低. 如果某一个服务器宕机了, 那么dns 在轮询到这个服务器的话是不会有响应的,即使去掉此 ip , 那么个电信服务商的 dns 是存在缓存, 在一定的时间内也是可以访问到此服务器的.尽管在一定程度上解决

  • vue-cil之axios的二次封装与proxy反向代理使用说明

    目录 Axios与proxy反向代理 1.Axios 的特性 2.Axios 的安装 3.Axios 与proxy反向代理的使用 axios反向代理proxy个人理解 使用反向代理proxy的原因 proxy基本配置 Axios与proxy反向代理 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 1.Axios 的特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 PromiseAPI 拦截请求和

  • Axios常见配置选项跨域详解

    Axios常见配置选项跨域详解

    目录 常见配置选项 实际项目中的简化写法 并发请求 多个请求接口 实际项目生命周期中使用axios数据存入data() 模块封装 拦截器 axios的post的请求头Content-Type axios 全局配置 接口函数的封装配置 设置代理解决请求跨域 vue前端跨域 axios : 基于http客户端的promise,面向浏览器和nodejs axios 依赖原生的 ES6 Promise 实现而被支持. 安装1.使用npm: npm install axios2.使用taobao源: cn

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • 如何使用TS对axios的进行简单封装

    目录 1.安装axios 2.在合适路径下新建request.ts(名称可随意),例如可以在项目的src下创建utils文件夹创建request.ts 3.导入axios并创建axios实例 4.封装请求函数 ① 查看axios的类型声明文件 ② 请求配置对象的类型 ③ 响应对象的类型 ④ axios.request函数 ⑤ 开始封装 ⑥ 使用 总结 1.安装axios npm i axios 2.在合适路径下新建request.ts(名称可随意),例如可以在项目的src下创建utils文件夹创

  • 关于Vue3使用axios的配置教程详解

    目录 一.安装axios 二.配置axios,添加拦截器 三.使用axios发送请求 附:Vue3 中全局引入 axios 总结 axios中文网站:axios-http.com/zh/ 一.安装axios npm install axios --save 二.配置axios,添加拦截器 在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下: import axios from 'axios' // 创建一个 axios 实例 const ser

  • 快速学习AngularJs HTTP响应拦截器

    任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途径. 四种拦截器 实现 request 方法拦截请求 request: function(config) { // do something on request success return config || $q.when(config); } 该方法会在 $http 发送请求后台之前执行,因

  • 浅析AngularJs HTTP响应拦截器

    为何要用拦截器? 任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途径.  拦截器允许你: 通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作.该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise

  • 详解AngularJs HTTP响应拦截器实现登陆、权限校验

    $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它.一个很好例子就是处理全局 http 异常.拦截器(Interceptors)应运而生.本文将介绍 AngularJS 的拦截器,并且给几个有用的例子. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一

随机推荐