在简书上看到一个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'
  })
}

页面中测试接口

created() {
      getApi().then((res) => {
        console.log(res);
      })
    },
Logo

前往低代码交流专区

更多推荐