前端项目没数据?教你抓取各大网站api |
您所在的位置:网站首页 › 各种api接口网站推荐 › 前端项目没数据?教你抓取各大网站api |
前言:我们前端人员在开发项目的时候,常常需要一些数据,但是我们又是学生,没有后端人员为我们提供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请求都在这里。操作如图:![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 我们第二步拿到的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)
一般这种情况是该网站的后端中,验证了你的请求头中host和refer是否是它网站的。 例子如下: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |