Vue+axios实现跨域请求代理接口的方法

原创 新起点博客  2020-10-07 10:00 
【上云必备】上云仅?102/年

1、引入Axios:网络请求使用 Axios,首先安装Axios依赖

npm i axios -S

对于网络请求,由于在每一次请求时都需要判断各种异常情况,然后提示用户,例如请求是否成功、失败的原因等,考虑到这些判断基本上都使用重复的代码,因此可以将网络请求封装,做成Vue的插件方便使用。由于封装的代码比较长,这里就不贴出来了,读者可以在GitHub 上查看,地址为https://github.com/lenve/vhr/blob/master/vuehr/src/utils/api.js 。配置完成后,在main.js中导入封装的方法,然后配置为Vue 的prototype,代码如下:

import {
  getRequest
} from './utils/api'
import {
  postRequest
} from './utils/api'
import {
  deleteRequest
} from './utils/api'
import {
  putRequest
} from './utils/api'

Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;

配置完成后,接下来对于任何需要使用网络请求的地址,都可以使用this.XXX执行一个网络请求,例如要执行登录请求,就可以通过this. postRequest(url,param)执行。

2. 配置请求转发

由于前端项目和后端项目在不同的端口下启动,前端的网络请求无法直接发送到后端,因此需要配置请求转发。下面介绍配置方式。

修改config目录下的index.js 文件,修改proxyTable,代码如下:

proxyTable: {
      // 配置HTTP请求转发
      '/': {
        target: 'http://192.168.84.72:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      },
      // 配置WebSocket请求转发
      '/ws/*': {
        target: 'ws://127.0.0.1:8082',
        ws: true
      }
    }

这里配置了两条规则,第一条是配置HTTP 请求转发,第二条是配置WebSocket 请求转发,WebSocket 请求在本项目的即时通信模块中会用到。

本文地址:https://www.henenseo.com/archives/3879
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情