VUEがproxyTableローカルエージェントを設定してドメイン間要求を実現することを記録します

簡単な本の上で1つの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);
      })
    },