1、我们在尝试抓取其他网站的数据接口时,某些接口需要经过请求头中的Host和Referer的检查,不是指定的host或referer将不予返回数据,且前端无法绕过这种检查

此时通过后端代理解决

在vue-cli 环境下,以qq音乐为例伪造请求头:

1.1 打开配置文件webpack.dev.conf,js,安装express,axios

并在文件开头const portfinder = require(‘portfinder’)后进行引入

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

let app = express()
let apiRoutes = express.Router()
app.use('/api', apiRoutes)

1.2 找到devServer节点,在其中配置新增before函数调用,在函数体内使用axios代为发送请求,前端的请求将请求到这里

  devServer: {
    before(app) {
      app.get('/api/getDiscList', function (req, res) {
        const 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)
        })
      })
    },
    clientLogLevel: 'warning',

1.3 修改前端请求地址

export function getDiscList() {
  // 使用jsonp抓取数据
  const url = '/api/getDiscList'

  const data = Object.assign({}, commonParams, {
    _: '1557234847616',
    platform: 'yqq',
    hostUinL: 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)
  })
}

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注