[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)
                  }
              })
            },
        }
    }
    
    
    
posted @ 2020-10-22 21:48  绝弹笔记  阅读(119)  评论(0编辑  收藏  举报