[Vue音乐项目] 第五节 服务器代理跨域

获取轮播图数据使用的是jsonp方法，然而获取歌单列表时，需要带上请求头部信息，此时用jsonp是无法做到的，需要使用node提供的服务器代理来间接获取数据，而axios不仅支持ajax请求，也支持服务器代理请求，接下来完成一次代理请求。

1. 打开cmd命令行，敲写以下命令安装axios

   npm install axios --save-dev
   

2. 打开src/api/recommend/index.vue文件，敲写以下代码

   //recommend/index.vue
   //导入刚才安装好的axios
   import axios from 'axios'
   ......
   //函数声明,跟getRecommend超不多
   function getDiscList() {
       //本地请求地址，会被代理
       var url = '/api/getDiscList'
       //参数整合
       var data = Object.assign({},commonParam,{
           platform: 'yqq',
           hostUin: 0,
           sin: 0,
           ein: 29,
           sortId: 5,
           needNewCode: 0,
           categoryId: 10000000,
           rnd: Math.random(),
           format: 'json
       })
       //发起代理请求，以promise形式返回请求结果
       return axios.get(url,{params:data},(res)=>{
           return Promise.resolve(res.data)
       })
   }
   

3. 打开根目录/config/index.js文件，敲写以下代码

   //config/index.js
   ...
   proxyTable: {
      //本地请求地址
     '/api/getDiscList': {
       //实际请求地址，即localhost:8080/api/getDiscList会请求下面的地址 
       target: 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg',
       //发送请求前的处理函数，在这里加上必要的请求头部信息
       bypass: function(req,res,proxyOptions) {
         req.headers.referer = 'https://c.y.qq.com';
         req.headers.host = 'c.y.qq.com';
       },
       //路径重写，可无
       pathRewrite: {
         '^/api/getDiscList': ''
       }
     }
   },
   ...
   

4. 打开src/components/recommend/index.vue文件，调用函数获取数据

   // recommend/index.vue
   
   //秉记先引用再使用的原则
   import {gerDiscList} from 'api/recommend'
   
   export default {
       //在实例挂载后的钩子函数里调用
       mounted() {
           this._getRecommend()
       }
       methods: {
           _getDiscList() {
             //调用引入的函数
             getDiscList().then((res)=>{
                 if(res.code == ERR_OK) {
                     //this.list = res.data.list
                     console.log(this.list)
                 }
             })
           },
       }
   }