jsonp2

解决如何用jsonp替代axios抓取qq音乐数据

1.前端准备工作

封装jsonp

更改配置文件设置路径

build>webpack.base.conf.js

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
       //设置common路径别名
      "common":resolve('src/common'),
      "components":resolve('src/components'),
      "api":resolve('src/api'),
      "base":resolve('src/base'),
    }
  },

设置路径别名后就可以这样引用了：

import jsonp from 'common/js/jsonp.js'

封装路径src>common>js>jsonp.js

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
//console.log(option)
  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
       // console.log(data)
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}

在src>api下配置请求test.js文件

import jsonp from 'common/js/jsonp'

const debug = process.env.NODE_ENV !== 'production'

export function test(){
  //请求的路由
    url='http://localhost:8900/api/getinfo'
  //请求的数据
  const data =  {
    g_tk: 1928093487,
    inCharset: 'utf-8',
    outCharset: 'utf-8',
    notice: 0,
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
    }
    //jsonp的回调函数
    options={{callback:'jsonp'}}
//向自己的后台发送jsonp请求
return jsonp(url,data,options)
}

在组件里调用test.js里的test方法发送请求抓取数据

测试组件为test.vue

<template>
    <div>
        <div>{{list}}</div>
    </div>
</template>

<script>
//导入test jsonp请求方法
import {test} from 'api/test'
    export default {
        data(){
            return{
                list:{}
            }
        },
        created() {
               // this.$nextTick(
                    this._test()
                //)
            },
        methods:{
            _test(){
                test().then((res) => {
                    
                    this.list=res.data.list
                })
            }

        }
    }
</script>

<style scoped>

</style>

2.后端处理

const express = require('express')
const axios = require('axios')
const app = express()

const appData = require('./data.json')
const seller = appData.seller

const router = express.Router()



//接收前端的jsonp请求
router.get('/getinfo', function(req, res, next) {
  console.log(req.query)
  var _callback = req.query.callback;
  var _data = seller;

  //后端接受jsonp请求后自己的服务器向qq音乐服务器发送axios请求
  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
  axios.get(url, {
    //设置请求头绕过qq音乐的拦截
    headers: {
      referer: 'https://c.y.qq.com/',
      host: 'c.y.qq.com'
    },
    //请求的数据
    params:req.query
  }).then((response) => {
    //获取qq服务器返回的数据后向我们的前端发送接收数据
    console.log(JSON.stringify(response.data))
    res.type('text/javascript');
    res.send(_callback + '(' + JSON.stringify(response.data) + ')');
          }).catch((e) => {
                console.log(e)
          })

})

app.use('/api', router)

app.use(express.static('./dist'))

const port = process.env.PORT || 8900

module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + port + '\n')
})

至此就完成如何用jsonp代替axios发送请求抓取数据了