前言
最近在使用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) { // 如果存在"text-align: center"># 代码 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对象的code if (res.code === ERR_OK) { console.log(res.data) const data = res.data this.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 Parameters platform: '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.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对象
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue + webpack如何绕过QQ音乐接口对host的验证详解”评论...
更新动态
20240520
20240520
- 咏月风雅公测福利大全 有哪些奖励
- dnf装备成长攻略
- 鸣潮丹瑾适配武器选什么 丹瑾四星五星武器推荐
- dnf装备指令输入怎么输入
- 《对马岛之魂》超越《战神4》成为PC最火爆PS游戏!
- 《生化1 重制版》首批细节曝光!击杀敌人要更多子弹
- 国产游戏崛起!这款海外乱杀的国产游戏《七日世界》 要来了
- 阿杜.2003-哈啰【海蝶】【WAV+CUE】
- 群星1990-国语畅销金榜第7集[日本版][WAV+CUE]
- 陈凡骐.2024-陈凡骐首张同名创作专辑【FLAC分轨】
- 《黑神话:悟空》官网新图 老猴子手捧金箍
- 国外玩家谈《黑神话:悟空》定价:别是70美元
- 晨报|《全境封锁:腹地》实机视频泄露 《对马岛之魂》PC玩家数破纪录
- Supper.Moment.2020-Everything.Is.You【寰亚】【WAV+CUE】
- 张美玲.1999-福建不朽民谣【南方】【WAV+CUE】