做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

vue + webpack如何繞過QQ音樂接口對host的驗證詳解

來源:懂視網 責編:小采 時間:2020-11-27 22:12:11
文檔

vue + webpack如何繞過QQ音樂接口對host的驗證詳解

vue + webpack如何繞過QQ音樂接口對host的驗證詳解:前言 最近在使用vue2.5+webpack3.6擼一個移動端音樂項目, 獲取全部歌單json數據時遇到了接口對host和referer的限制 ,故不能直接在前端使用jsonp對接口數據的讀取。 一、 先實現使用jsonp讀取的方式安裝jsonp模塊并, 封裝請求方法 1. $ npm
推薦度:
導讀vue + webpack如何繞過QQ音樂接口對host的驗證詳解:前言 最近在使用vue2.5+webpack3.6擼一個移動端音樂項目, 獲取全部歌單json數據時遇到了接口對host和referer的限制 ,故不能直接在前端使用jsonp對接口數據的讀取。 一、 先實現使用jsonp讀取的方式安裝jsonp模塊并, 封裝請求方法 1. $ npm

前言

最近在使用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) ES5
 params += `&${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對象的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對象

好了,

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue + webpack如何繞過QQ音樂接口對host的驗證詳解

vue + webpack如何繞過QQ音樂接口對host的驗證詳解:前言 最近在使用vue2.5+webpack3.6擼一個移動端音樂項目, 獲取全部歌單json數據時遇到了接口對host和referer的限制 ,故不能直接在前端使用jsonp對接口數據的讀取。 一、 先實現使用jsonp讀取的方式安裝jsonp模塊并, 封裝請求方法 1. $ npm
推薦度:
標簽: VUE QQ音樂的 webpack
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 乌兰浩特市| 右玉县| 鄂尔多斯市| 瑞安市| 天水市| 文昌市| 盐城市| 临颍县| 江陵县| 淳化县| 新宾| 曲沃县| 鹿泉市| 鄂尔多斯市| 高清| 新和县| 伊宁县| 边坝县| 喜德县| 常熟市| 赫章县| 昭苏县| 合江县| 锦屏县| 石阡县| 兖州市| 高青县| 许昌县| 连江县| 普兰店市| 怀安县| 密云县| 敦煌市| 邯郸县| 英山县| 岳西县| 丰宁| 湾仔区| 横山县| 鹤山市| 崇义县|