VUE 设置 proxyTable 本地代理实现跨域请求

在简书上看到一个 vue 抓取 qq 音乐数据的 demo，其内容数据都是通过调取 qq 音乐的接口获得，由于本地项目直接使用接口会抛错，因此需要通过代理来转发请求，在 vue 中通过修改 vue proxyTable 实现跨域请求接口数据。

具体配置方式如下：
在 confid>index.js 中修改 proxyTable:{}为 ↓↓↓

proxyTable: {
      '/api': {
        target: 'https://c.y.qq.com',//需要代理的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' //这里理解成用‘/api’代替target里面的地址，调取接口时直接用/api代替
        }
      }
    },
​

注：在 vue 脚手架中配置完 config，请重启一下项目，再进行接口的调用测试

项目统一的 api.js 中对接口调用方式如下，此处参考了 element-admin 中对接口进行请求时利用 axios 过滤器的写法；
具体可参考 https://github.com/PanJiaChen/vueAdmin-template/blob/master/src/utils/request.js
或 axios 官方文档 https://www.kancloud.cn/yunye/axios/234845；
当然，请求接口也可直接在功能页面直接调用，此处不赘述

import request from '@/utils/request';// axios过滤器
//接口
export function getApi() {
  return request({
    url:'/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',// 代理地址下的接口
    method:'get'
  })
}
​

页面中测试接口

import {getApi} from '@/api/user'
created() {
      getApi().then((res) => {
        console.log(res);
      })
    },
​