前端项目没数据？教你抓取各大网站api

您所在的位置：网站首页 › 无法获得epg信息 › 前端项目没数据？教你抓取各大网站api

前端项目没数据？教你抓取各大网站api

2023-09-12 19:28| 来源: 网络整理| 查看: 265

前言：我们前端人员在开发项目的时候，常常需要一些数据，但是我们又是学生，没有后端人员为我们提供api接口，导致我们常常苦恼于数据。所以今天就教大家如何抓取别人网站的数据为我们所用。以下教程以抓取QQ音乐和csdn的api为教学：

抓取api各个步骤： 1.获取api地址2.使用api地址3.在vue中项目中利用后端做请求代理解决跨域和绕过host、refer验证特殊情况：在response中可以看得到数据，导致open new tab之后看到的数据和response中的不一样。

1.获取api地址

我们想要获取某个网站的动态数据的时候，我们需要知道这个网页是向哪个地址发起请求的。获取api地址步骤如下：

去到存在我们需要数据的网页，例如我们需要抓取csdn首页的推荐文章数据，我们就先用浏览器打开csdn首页。打开浏览器控制台，切到network选项，并且过滤出xhr请求（xhr就是XMLHttpRequest），一般网页的ajax请求都在这里。操作如图：在这里插入图片描述

3.根据请求的response来找出我们需要的api地址在这里插入图片描述

4.由于在控制台看数据不太方便，我们可以打开在浏览器看。可以安装一些插件，方便看json数据。我使用的是谷歌浏览器的JSON views插件。在这里插入图片描述

5.找到我们想要的数据之后，我们需要回到控制台中，查找请求地址，和请求参数。在这里插入图片描述

6.分析请求参数我们可以通过删除请求参数来看该请求参数是否是必须的，获取通过语义化来认识该请求参数的作用。途中的ca’t：我们前端人员在开发项目的时候，常常需要一些数据，但是我们又是学生，没有后端人员为我们提供api接口，导致我们常常苦恼于数据。所以今天就教大家如何抓取别人网站的数据为我们所用。以下教程以抓取QQ音乐和csdn的api为教学：** @TOC# 1.获取api地址我们想要获取某个网站的动态数据的时候，我们需要知道这个网页是向哪个地址发起请求的。获取api地址步骤如下： 1. 去到存在我们需要数据的网页，例如我们需要抓取csdn首页的推荐文章数据，我们就先用浏览器打开csdn首页。 2. 打开浏览器控制台，切到network选项，并且过滤出xhr请求（xhr就是XMLHttpRequest），一般网页的ajax请求都在这里。操作如图：在这里插入图片描述

3.根据请求的response来找出我们需要的api地址在这里插入图片描述

5.找到我们想要的数据之后，我们需要回到控制台中，查找请求地址，和请求参数。在这里插入图片描述

6.分析请求参数我们可以通过删除请求参数来看该请求参数是否是必须的，获取通过语义化来认识该请求参数的作用。途中的category为home，应该是表明请求的是首页下的数据。shown_offset这个参数，不传有个默认值0，不太清除该参数的作用，但不影响我们获取csdn推荐文章的数据。 2.使用api地址

我们第二步拿到的csdn首页推荐文章api地址：https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1593997422542608。我们可以在js中通过ajax请求来获取该数据。我们使用ajax请求这些api的时候，一般都会遇到跨域的请求，对于跨域的问题，网上有各种解决方案。我在做项目的时候，一般使用后端做接口代理的方法来解决跨域问题，和一些其他的问题。

3.在vue中项目中利用后端做请求代理解决跨域和绕过host、refer验证

1.编辑配置文件webpack.dev.conf.js。安装express和axios，添加以下代码：

const axios = require('axios') const express = require('express') const app = express() const Router = express.Router() app.use('/api', Router)

在这里插入图片描述 2.获取后端接口代理的数据。如果你的前端vue项目是运行在8080端口，你可以在前端项目中向：http://localhost:8080/api/apiData发送ajax请求，这样就可以拿到数据了，并且解决了跨域问题。如果学过node.js的同学就应该很容易理解。

特殊情况：在response中可以看得到数据，导致open new tab之后看到的数据和response中的不一样。

一般这种情况是该网站的后端中，验证了你的请求头中host和refer是否是它网站的。例子如下：在这里插入图片描述这种就是该网站后端做了验证，看请求的网站的来源是不是自己的网站。对于这种阻挠，我们可以在后端接口代理中，设置请求头中的origin和referer来欺骗后端，从而拿到数据。编辑配置文件webpack.dev.conf.js，添加这个：在这里插入图片描述我们可以在header中查看origin和referer：希望以上教程对你的前端开发有所帮助~

【本文地址】

前端项目没数据？教你抓取各大网站api

前端项目没数据？教你抓取各大网站api

今日新闻

推荐新闻