前言：我们前端人员在开发项目的时候，常常需要一些数据，但是我们又是学生，没有后端人员为我们提供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地址4.由于在控制台看数据不太方便，我们可以打开在浏览器看。可以安装一些插件，方便看json数据。我使用的是谷歌浏览器的JSON views插件。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相关推荐

数据抓取之（一）：抓取北京交通管理网站的车辆违法信息(已完结)
我的个人信息: 本猿92年小生一枚,10级三流本科院校的软件工程专业,今年2013年10月份开始实习,说长不长说短不短的时间混迹在中小型互联网公司,主要从事的java研发工作.更确切一点的职责则是数据 ...
python数据分析实例:python抓取课工厂网站数据和分析
在线教育网站学习,是很多人利于闲余时间进行充电的一种选择.本篇文章利用python抓取在线教育网站课工场课程页面的数据,进行简要分析. 通过使用requests库对课工场课程列表页进行抓取. 通过Be ...
python 抓取解析接口数据_[干货]用python抓取摩拜单车API数据并做可视化分析(源码)...
原标题:[干货]用python抓取摩拜单车API数据并做可视化分析(源码) 在APP中能看到很多单车,但走到那里的时候,才发现车并不在那里.有些车不知道藏到了哪里:有些车或许是在高楼的后面,由于有GP ...
抓取摩拜单车API数据，并做可视化分析
抓取摩拜单车API数据,并做可视化分析纵聊天下百家号|04-19 15:16 关注警告:此篇文章仅作为学习研究参考用途,请不要用于非法目的. 摩拜是最早进入成都的共享单车,每天我从地铁站下来的时 ...
JAVA+网络数据包的抓取与分析实验
一.实验目的熟悉TC P/IP数据包的结构. 掌握Wireshark的使用方法. 能够利用JNet Pcap编程实现数据包的抓取与分析. 二.实验准备 1.通过抓包,可以进行网络故障分析.流量监控. ...
大数据之内衣的诱惑——抓取电商网站评论的秘密
大数据之内衣的诱惑--抓取电商网站评论的秘密前言前段时间在知乎上看到有大神利用淘宝的评论信息,抓取购买内衣的型号和地域,分析出不同省份的女性身材指数分布.受之启发,我也动手研究了一下京东的评论信息 ...
穿越火线数据包的抓取和分析及服务器欺骗的实现
几天功夫,我们敬爱的穿越火线从2.5到2.6再到2.7再到现在的2.8,号称全服反外挂(的确是反了的),WPE会被检测为非法模块. 本人就来说一下自己关于穿越火线数据包的抓取和分析及服务器欺骗的实现的 ...
Python之 - 使用Scrapy建立一个网站抓取器，网站爬取Scrapy爬虫教程
Scrapy是一个用于爬行网站以及在数据挖掘.信息处理和历史档案等大量应用范围内抽取结构化数据的应用程序框架,广泛用于工业. 在本文中我们将建立一个从Hacker News爬取数据的爬虫,并将数据按我 ...
网站优化中哪些设置会影响蜘蛛的抓取？对网站SEO产生什么影响？
网站在优化中,要有一定的收录基础才能有更大的几率提升排名,并获得搜索引擎的喜爱.但在网站优化中难免会有一些细节没注意到而影响蜘蛛的抓取,下面就带大家一起了解一下. 一.登录设置有些网站会设置注册账号 ...
网站开启https后很慢_网站优化中哪些设置会影响蜘蛛的抓取？对网站SEO产生什么影响...
网站在优化中,要有一定的收录基础才能有更大的几率提升排名,并获得搜索引擎的喜爱.但在网站优化中难免会有一些细节没注意到而影响蜘蛛的抓取,下面就带大家一起了解一下. 一.登录设置有些网站会设置注册账号 ...

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