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