最近做vue的一个项目的时候,需要抓取某q音乐的一些数据,分析了某q音乐Web上轮播图的图片和链接的数据传输,发现了是用通过jsonp来做的跨域处理。
这里写图片描述

然后通过下面代码成功抓取到数据:

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        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) : ''
}
export function 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)
}

但是抓下面的歌单数据的时候用jsonp就请求不成功了,返回500状态码,是某q那边的服务器挂了吗,显然不是。
然后继续分析network里面的东西,发现多了一个referer和host,referer是什么东西呢:

HTTP中的Referer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器基此可以获得一些信息用于处理。
简而言之,HTTP
Referer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器藉此可以获得一些信息用于处理。比如从我主页上链接到一个朋友那里,他的服务器就能够从HTTP
Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。

那么猜想某q音乐是不是通过这个对接口做了限制,他们只接受从特定页面发送过来的请求。

后来用axios后端代理成功抓取到,和AJAX同理

export function getDiscList() {
  const url = '/api/getDiscList'

  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

修改dev-server.js文件,这里是后端Node的消息处理
增加代码:

var app = express()

var apiRoutes = express.Router()

apiRoutes.get('/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)
  })
})

app.use('/api', apiRoutes)

捕捉到前台发送的请求,向header里面增加伪装属性referer和host。在把返回的数据以json形式发送回前端。

Logo

前往低代码交流专区

更多推荐