最近在使用vue2.5+webpack3.6撸一个移动端音乐项目, 获取全部歌单json数据时遇到了接口对host和referer的限制 ，故不能直接在前端使用jsonp对接口数据的读取。

一、 先实现使用jsonp读取的方式

安装jsonp模块并， 封装请求方法

1. $ npm install -S jsonp

2. 封装

import originJSONP from 'jsonp'function jsonp(url, data, options) {// 如果存在?则直接加params(data), 否则先加?再加 params(data)url += (url.indexOf('?') < 0 ? '?' : '') + params(data)// 结果返回一个Promise对象return new Promise((resolve, reject) => {originJSONP(url, options, (err, data) => {if (!err) {resolve(data)} else {reject(err)}})})
}function params(data) {let params = ''for (var k in data) {let value = data[k] != undefined ? data[k] : ''// url += '&' + k + '=' + encodeURIComponent(value) ES5params += `&${k}=${encodeURIComponent(value)}`  // ES6}// 去掉首个参数的&, 因为jsonp方法中参数自带&return params ? params.substring(1) : ''
}复制代码

3. 请求数据

# 代码const commonParams = {g_tk: 5381,inCharset: 'utf-8',outCharset: 'utf-8',notice: 0,format: 'jsonp'
}
const options = {param: 'jsonpCallback'
}getRecommend() {const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'const data = Object.assign({}, commonParams, {platform: 'h5',uin: 0,needNewCode: 1})return jsonp(url, data, options)
}复制代码

4. 组件内调用getRecommend()方法, 获取数据

methods: {_getRecommend() {getRecommend().then((res) => {// ERR_OK = 0是自定义的语义化参数, 对应返回json对象的codeif (res.code === ERR_OK) {console.log(res.data)const data = res.datathis.slider = data.slider}})}
},
created() {this._getRecommend()
}复制代码

console.log(res.data)可打印出json数据

以上是使用jsonp的方式请求数据, 但对于被host和referer限制的json， 需要绕过host验证，先让服务端请求接口，前端页面再通过服务端请求数据。而不能像jsonp那样直接前端请求json对象。报错如下

二、后端axios(ajax)请求接口数据

1.  定义后端代理请求 build/webpack.dev.config.js

const axios = require('axios')
devServer: {before(app) {app.get('/api/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)})})},#  ...其他原来的代码
}
复制代码

2.  前端请求后端已获取的远程数据

import axios from 'axios'function getDiscList() {// const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'const url = '/api/getDiscList'const data = Object.assign({}, commonParams, {// 以下参数自行参考源json文件的Query String Parametersplatform: 'yqq',uin: 0,needNewCode: 0,hostUin: 0,sin: 0,ein: 29,sortId: 5,rnd: Math.random(),categoryId: 10000000,format: 'json'})return axios.get(url, {params: data}).then((res) => {return Promise.resolve(res.data)})
}复制代码

3. 组件内调用getDiscList()方法， 可输出json数据

methods: {_getRecommend() {getRecommend().then((res) => {if (res.code === ERR_OK) {// console.log(res.data)const data = res.datathis.slider = data.slider}})},_getDiscList() {getDiscList().then((res) => {console.log(res.data)})}
},
created() {this._getRecommend()this._getDiscList()
}复制代码

总结， vue+webpack项目中，如需请求获取远程json数据时， 一般由两种情况:

1. 未受host和referer限制的前端组件可以直接使用jsonp插件请求json对象

2. 受host和referer限制需要验证的， 通过后端代理方式，使用axios请求， 前端再请求后端json对象