vue-music (4) 对有refrere和host保护的数据的抓取

利用axios方法
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

1.axios.get()

axios.get('/user', {
    params: {
    ID: 12345
    }
}).then((res) => {
     return Promise.resolve(res.data);
}).catch((error) => {
    console.log(error);
});

2.axios.post()

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then((res) => {
     return Promise.resolve(res.data)
}).catch((error) => {
    console.log(error);
});

3.执行多个并发请求

function getUserAccount() {
    return axios.get('/user/12345');
}
function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
    //两个请求现已完成
    }
));

Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable（即带有then方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态（指resolved/rejected/pending/settled）；如果传入的value本身就是promise对象，则该对象作为Promise.resolve方法的返回值返回；否则以该值为成功状态返回promise对象

正向代理
正向代理 是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。
　　正向代理的用途：
（1）访问原来无法访问的资源，如google
（2） 可以做缓存，加速访问资源
　　 （3）对客户端访问授权，上网进行认证
　　 （4）代理可以记录用户访问记录（上网行为管理），对外隐藏用户信息
反向代理
反向代理（Reverse Proxy）实际运行方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

反向代理的作用：
（1）保证内网的安全，可以使用反向代理提供WAF功能，阻止web攻击 大型网站，通常将反向代理作为公网访问地址，Web服务器是内网。
（2）负载均衡，通过反向代理服务器来优化网站的负载

---

反向代理方法
1.在recommend.js中写请求函数

export function getDiscList () {
  const url = '/api/getDiscList'
  const data = Object.assign({}, {
    platform: 'yqq',  // 都是从QQ音乐请求中的真实数据
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json' // 返回json对象
  })
  return axios.get(url, {  // 固定套路
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

2.在config / index.js 写反向代理配置

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    // 反向代理 
    proxyTable: {
      '/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'; // 请求referer
          req.headers.host='c.y.qq.com'; // 也可以不写，请求会自动发送host
        },
        pathRewrite:{
          '^/api/getDiscList':''
        }
      },

// 以下代码不需要改动
        host: '0.0.0.0',
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, 
        ...
}

3.在recommend.vue 中发送请求 获得数据

created(){
    this._getDiscList()
},
methods: (){
   _getDiscList () {
     getDiscList().then((res) => {
        if (res.code === ERR_OK) {
          console.log(res.data) // 返回数据
        }
      })
   },
   ...
}

另一种方法
在webpack.dev.conf.js 中设置

---