vue + webpack如何绕过QQ音乐接口对host的验证详解
前言最近在使用vue2.5+webpack3.6撸一个移动端音乐项目,获取全部歌单json数据时遇到了接口对host和referer的限制 ，故不能直接在前端使用jsonp对接口数据的读取。 一、先实现使用jsonp读取的方式安装jsonp模块并， 封装请求方法1. 2.封装 {
originJSONP(url,options,(err,data) => {
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
function params(data) { 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) } 4.组件内调用 {
// ERR_OK = 0是自定义的语义化参数,对应返回json对象的code
if (res.code === ERR_OK) {
console.log(res.data)
const data = res.data
this.slider = data.slider
}
})
}
},created() {
this._getRecommend()
}
以上是使用jsonp的方式请求数据,但对于被host和referer限制的json，需要绕过host验证，先让服务端请求接口，前端页面再通过服务端请求数据。而不能像jsonp那样直接前端请求json对象。报错如下
二、后端axios(ajax)请求接口数据1. 定义后端代理请求 build/webpack.dev.config.js {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
},# ...其他原来的代码
}
2. 前端请求后端已获取的远程数据 {
return Promise.resolve(res.data)
})
}
3.组件内调用 {
if (res.code === ERR_OK) {
// console.log(res.data)
const data = res.data
this.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对象 好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
