前言
最近在使用vue2.5+webpack3.6撸一个移动端音乐项目,获取全部歌单json数据时遇到了接口对host和referer的限制 ,故不能直接在前端使用jsonp对接口数据的读取。
一、先实现使用jsonp读取的方式安装jsonp模块并, 封装请求方法
1. $ npm install -S jsonp
2.封装import originJSONP from 'jsonp'
function params(data) {
let params = ''
for (var k in data) {
let value = data[k] != undefined ? data[k] : ''
// url += '&' + k + '=' + encodeURIComponent(value) ES5
params += &${k}=${encodeURIComponent(value)}
// ES6
}
// 去掉首个参数的&,因为jsonp方法中参数自带&
return params ? params.substring(1) : ''
}
3.请求数据
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,options)
}
console.log(res.data)
可打印出json数据
以上是使用jsonp的方式请求数据,但对于被host和referer限制的json,需要绕过host验证,先让服务端请求接口,前端页面再通过服务端请求数据。而不能像jsonp那样直接前端请求json对象。报错如下
二、后端axios(ajax)请求接口数据
1. 定义后端代理请求 build/webpack.dev.config.js
2. 前端请求后端已获取的远程数据
3.组件内调用getDiscList()
方法,可输出json数据
总结, vue+webpack项目中,如需请求获取远程json数据时,一般由两种情况:
1.未受host和referer限制的前端组件可以直接使用jsonp插件请求json对象
2.受host和referer限制需要验证的,通过后端代理方式,使用axios请求,前端再请求后端json对象
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。