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

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 请求在本项目的即时通信模块中会用到。

想要了解更多相关知识,可访问 前端学习网站!!

以上就是vue+axios实现跨域请求代理接口的方法的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏