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


Posted in Vue.js onApril 07, 2022

Axios与proxy反向代理

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

1、Axios 的特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

2、Axios 的安装

npm i axios
# 或者
yran add axios

3、Axios 与proxy反向代理的使用

在要进行使用的文件(request.js)里面导入

// 这是实现 axios 的二次分装
// 导入下载好的包
impront axios from 'axios'
// 创建 axios 实例
const service = axios.create({
    // 添加要对接的后端 url 接口
    // bassUrl: '<url>',
    // 设置超时时间
    timeout: 3000
})
// 请求拦截
service.interceptors.request.use(config => {
    // 可以添加一些响应头信息等
    
    return config
}) 
// 响应拦截
service.interceptors.response.use(res => {
    console.log('请求拦截', res)
    return res
})
// 导出
export default service

如果是对接多个后端接口,前端应用和后端API服务器没有运行在同一个主机上,你需要在开发环境下将API请求代理到 API服务器,就在vue.config.js 中书写如下代码

// vue.config.js
module.exports = {
  devServer:{
      // 更改端口号
      port: 9550,
      // 是否自动打开浏览器
      open: true,
      proxy: {
       // 这里是访问到以 /api 开头的 url 的时候会代理到target 目标上
          '/api': {
              target:'<url>',
              ws: true,
              changeOrigin:true,
              // 重新修改路径
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

注:为什么要重新修改路径,因为在发送请求后会在url中多拼接上一个 ’‘ /api ’‘ ,但是我们获取数据又不需要这个才能拿到,所以就要重新修改,把他拿掉;拿掉之后就可以获取到数据了

最后那个地方需要就直接导入service 然后调用就行了

axios反向代理proxy个人理解

使用反向代理proxy的原因

首先需要了解浏览器的同源策略,同源就是说比如你VUE的项目地址是“http://localhost:8080”,而你后端项目启动地址是‘http://localhost:9999’,两者中协议(http)、域名(localhost)相同,但是端口号(:xxxx)vue是8080,而后端是9999不相同,所以产生跨域,需要使用反向代理。(若两者满足协议、域名、端口号相同则不存在跨域问题)。

反向代理在我个人理解就是给你vue项目访问后端资源时给你套上的一个壳,让浏览器认为本次请求是同源的,浏览器就不会进行拦截,数据可以正常返回(类似vpn原理吧)。

proxy基本配置

module.exports = {
    devServer: {
        proxy: {
            '/proxyurl':{
                target:'http://localhost:9999',//起同源作用的url 简单来说就是你要访问的服务器
                //ws: true, 这个是 开启websocket
                changeOrigin: true,//字面意思:更改源点 很多人说是开启跨域 也可以这么理解
                pathRewrite: {
                    '^/proxyurl': '' //还有一种写法是'^/proxyurl': '/' 自测
                }
            }
        }
    }
}
//写个最简单的例子用法
//前端项目地址是 http://localhost:8080
//后端项目地址是 http://localhost:9999
    axios.get("/proxyurl/user/getalluser").then(res => {
        console.log(res);
    });

解释这个例子:

显然我们是通过vue项目访问了后端资源,抛开代理单看这段代码,是以http://localhost:8080/proxyurl/user/getalluser请求资源的。

但是有了反向代理,反向代理看到了你这段url中出现了’/proxyurl‘,反向代理起作用,将’/proxyurl‘前面这段’http://localhost:8080‘替换成了’http://localhost:9999‘,这时候请求资源的url变为‘http://localhost:9999/proxyurl/user/getalluser’。

但是我们又配置了一项pathRewrite: {'^/proxyurl': ''},'^/proxyurl'是正则表达式,它会匹配你url中的字符串。这一选项的代码意思是,将url中的’/proxyurl‘替换为空字符串。则现在的url是http://localhost:9999/user/getalluser

ps:通常我们会将axios封装,可以在创建axios实例时这样写

export function request(config){
    let axiosInstance = axios.create({
        baseURL: '/proxyurl', //在调用时拼接上后面的url就可以了
        timeout: 5000
    });
    return axiosInstance(config);
}

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

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 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实现拖拽功能
vue整合百度地图显示指定地点信息
You might like
php 无极分类(递归)实现代码
2010/01/05 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
使用python turtle画高达
2020/01/19 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python如何使用腾讯云发送短信
2020/09/17 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
门诊手术室工作制度
2014/01/30 职场文书
趣味体育活动方案
2014/02/08 职场文书
教师开学感言
2014/02/14 职场文书
中秋晚会活动方案
2014/08/31 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
蜗居观后感
2015/06/11 职场文书
Python实现byte转integer
2021/06/03 Python
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技