绕过Referer和Host检查

前端数据接口抓取，后端代理解决检查问题

最新推荐文章于 2025-03-02 13:57:20 发布

weixin_34226182

最新推荐文章于 2025-03-02 13:57:20 发布

阅读量668

点赞数

CC 4.0 BY-SA版权

文章标签：前端 webpack 后端 ViewUI

原文链接：http://www.cnblogs.com/Tanqurey/p/10828660.html

博客指出前端抓取其他网站数据接口时，部分接口会检查请求头中的Host和Referer，前端无法绕过。可通过后端代理解决，还以vue - cli环境下的qq音乐为例，介绍了伪造请求头的操作，如打开webpack.dev.conf.js配置文件，安装express、axios并引入。

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代为发送请求，前端的请求将请求到这里
before(app) {
app.get('/api/getDiscList', (req, res) => {
const url = "https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg"
axios.get(url, {
headers: {
referer: "https://y.qq.com/m/index.html",
host:'c.y.qq.com'
},
params: req.query//转发前端请求的参数
}).then((response) => {
res.json(response.data)//传回qq后台相应的请求至前端
}).catch((err) => {
console.log(err)
})

})
}

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)
  })
}

转载于:https://www.cnblogs.com/Tanqurey/p/10828660.html