vue-music 跨域获取QQ音乐歌单接口

最近在看vue音乐APP视频学习,须要跨域获取歌单数据，视频中老师是在build/dev-server.js文件配置跨域接口的，可是新版的vue-cli是没有这个文件的，个人vue版本是"2.5.2"，

网上参考了反向代理的方法实现了跨域，以为颇有用，分享一下：

歌单url： https://y.qq.com/portal/playlist.html

旧版本目录结构以下

相关配置文件以下：

var axios = require('axios') var port = process.env.PORT || config.dev.port
var autoOpenBrowser = !!config.dev.autoOpenBrowser
var proxyTable = config.dev.proxyTable

var app = express() var apiRoutes = express.Router() apiRoutes.get('/getDiscList', function (req, res) { var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' axios.get(url, { headers: { referer: 'https://c.y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then((response) => { res.json(response.data) }).catch((e) => { console.log(e) }) }) app.use('/api', apiRoutes)

 

然而： 如今目录结构改变后，原来的方法已经不能使用，找到一个好的解决方法：

使用ProxyTable反向代理：在这个index.js文件里面找到ProxyTable配置

index.js 配置以下：

    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';
          req.headers.host = 'c.y.qq.com';
        },
        pathRewrite: {
          '^/api/getDiscList': ''
        }
      }
    },
//注意上面的写法

回到文件： api/recommendj.s 

 

具体代码以下：

import jsonp from '../common/js/jsonp'
import {commonParams, options} from './config' import axios from 'axios'

export function getRecommend() {
  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
  const data = Object.assign({}, commonParams, {
    uin: 0,
    platform: 'h5',
    needNewCode: 1
  })
  return jsonp(url, data, options)
}

// ajax请求,不是jsonp请求了
export function getDiscList() {
  const url = '/api/getDiscList'
  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })
  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

这样就能够实现，结果以下：

也能拿到列表数据了：

 

json和jsonp的区别：

json是一种格式，jsonp是一种请求跨域资源的方式。

跨域：是指浏览器不能执行其余网站的脚本，它是由浏览器的同源策略形成的，是浏览器施加的安全限制。在跨域状况下，XMLHTTPRequest是不能发送异步请求的。
所谓同源是指域名、协议、端口均相同。

那么，同是跨域方法，为何轮播图的请求能够用jsonp的方式，而歌单的请求要使用反向代理，两个都是跨域方法。

比较两个请求jsonp和proxyTable反向代理的异同：

jsonp原理：<script>标签里的src是没有跨域限制的，<img>标签里的src也是没有限制的，咱们书写网页的过程当中不难发现这一点。jsonp就是经过在本站脚本建立一个<script>便签，将地址指向第三方的API地址来达到第三方通信的目的，并提供一个回调函数来接收数据，第三方响应为json数据的包装，这个是jsonp名字的由来（json padding）
jsonp的局限性：只支持GET方式的HTTP请求，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题

反向代理：本方法是在本身的浏览器建立一个服务器，而后让本身的服务器去请求目标服务器。并且跨域是针对JavaScript来讲的，JavaScript 是插入HTML页面后在浏览器上执行的脚本。服务器之间是能够随便请求数据而不受限制的。咱们经过本身建立的服务器去请求目标服务器，而后在从咱们客户端去请求咱们本身建立的服务器，这就不存在跨域了。

 

参考文章：https://segmentfault.com/a/1190000013073545

感谢做者分享