使用 NodeJS 和 Javascript 进行网页爬取

Web 抓取主要是连接和数据编程，因此使用 Web 语言进行抓取似乎很自然，那么我们可以使用 javascript 抓取吗？

在本教程中，我们将学习使用 NodeJS 和 Javascript 进行网络抓取。我们将深入探讨 HTTP 连接、HTML 解析、流行的网络抓取库以及常见挑战和网络抓取习语。

最后，我们将通过一个示例网络抓取项目 – https://www.etsy.com/product scraper来完成所有工作，该项目说明了在 NodeJS 中进行网络抓取时遇到的两个主要挑战：cookie 跟踪和 CSRF 令牌。

概述和设置

Web 抓取中的 NodeJS 因Puppeteer浏览器自动化工具包而广为人知。使用 web 浏览器自动化进行 web 抓取有很多好处，尽管它是一种复杂且占用大量资源的 javascript web 抓取方法。
通过一些逆向工程和一些聪明的 nodeJS 库，我们可以在没有网络浏览器的全部开销的情况下获得类似的结果！

在本文中，我们将特别关注一些工具。对于连接，我们将使用axios HTTP 客户端，对于解析，我们将专注于cheerio HTML 树解析器，让我们使用这些命令行指令安装它们：

$ mkdir scrapfly-etsy-scraper
$ cd scrapfly-etsy-scraper
$ npm install cheerio axios

发出请求

连接是每个网络抓取工具的重要组成部分，NodeJS 有一个庞大的 HTTP 客户端生态系统，尽管在本教程中我们将使用最流行的一个 – axios。

HTTP 简而言之

要从公共资源收集数据，我们需要先与其建立连接。大多数网络都是通过 HTTP 提供的。该协议可以概括为：客户端（我们的抓取工具）发送对特定文档的请求，服务器回复请求的文档或错误 – 非常直接的交换。

正如您在此图中看到的：我们发送一个请求对象，它由方法（又名类型）、位置和标头组成。反过来，我们收到一个响应对象，它由状态代码、标题和文档内容本身组成。

在我们的 axios 示例中，它看起来像这样：

import axios from 'axios';

// send request
response = await axios.get('https://httpbin.org/get');
// print response
console.log(response.data);

尽管对于节点 js 网络抓取，我们需要了解有关请求和响应的一些关键细节：方法类型、标头、cookie…让我们快速概览一下。

请求方法

HTTP 请求可以很方便地分为几种执行不同功能的类型。我们最常在网络抓取中使用：

GET请求文档——抓取中最常用的方法。
POST发送文件以接收文件。例如，这用于登录、搜索等表单提交。
HEAD检查资源的状态。这主要用于检查网页是否已更新其内容，因为这些类型的请求非常快。

其他方法并不常见，但了解它们还是有好处的：

PATCH请求旨在更新文档。
PUTrequests 旨在创建新文档或更新它。
DELETE请求旨在删除文档。

请求位置 – URL

URL（通用资源位置）是我们请求中最重要的部分——它告诉我们的 nodejs 抓取器应该在哪里寻找资源。尽管 URL 可能非常复杂，但让我们看一下它们的结构：

在这里，我们可以可视化 URL 的每个部分：

协议 – 要么http要么https。
host – 是服务器的地址/域。
location – 是我们请求的资源的位置。
parameters – 允许自定义资源。例如language=en会给我们资源的英文版本。

如果您不确定 URL 的结构，您可以随时启动 Node 的交互式 shell（node在终端中）并让它为您解决：

$ node
> new URL("http://www.domain.com/path/to/resource?arg1=true&arg2=false")
URL {
  href: 'http://www.domain.com/path/to/resource?arg1=true&arg2=false',
  origin: 'http://www.domain.com',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'www.domain.com',
  hostname: 'www.domain.com',
  port: '',
  pathname: '/path/to/resource',
  search: '?arg1=true&arg2=false',
  searchParams: URLSearchParams { 'arg1' => 'true', 'arg2' => 'false' },
  hash: ''
}

请求标头

请求标头指示有关我们请求的元信息。虽然看起来请求标头只是网络抓取中的次要元数据细节，但它们非常重要。

标头包含有关请求的基本详细信息，例如谁在请求数据？他们期望什么类型的数据？弄错这些可能会导致抓取错误。

让我们来看看一些最重要的标头及其含义：

User-Agent是一个身份标头，它告诉服务器谁在请求文档。

# example user agent for Chrome browser on Windows operating system:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

每当您在网络浏览器中访问网页时，都会使用类似于“浏览器名称、操作系统、某些版本号”的用户代理字符串来标识自己。
用户代理帮助服务器决定是服务还是拒绝客户端。抓取时我们希望融入其中以防止被阻止，因此最好将用户代理设置为看起来像浏览器之一。

Cookie用于存储持久性数据。这是网站跟踪用户状态的一项重要功能：用户登录、配置首选项等。

Accept标头（还有 Accept-Encoding、Accept-Language 等）包含有关我们期望的内容类型的信息。通常，在网络抓取时，我们想模仿一种流行的网络浏览器，例如 Chrome 浏览器：

text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

X-前缀的标头是特殊的自定义标头。这些在网络抓取时非常重要，因为它们可能配置抓取的网站/webapp 的重要功能。

响应状态码

一旦我们发送了我们的请求，我们最终会收到一个响应，我们首先会注意到的是状态代码。状态代码指示请求是成功、失败还是需要更多信息（如身份验证/登录）。

让我们快速浏览一下与网络抓取最相关的状态代码：

200个范围码一般代表成功！
300 范围代码往往意味着重定向。换句话说，如果我们请求页面，/product1.html它可能会被移动到一个新的位置，比如/products/1.html.
400 范围代码表示请求格式错误或被拒绝。我们的节点网络抓取工具可能缺少一些标头、cookie 或身份验证详细信息。
500 个范围代码通常意味着服务器问题。该网站可能现在不可用或有意禁止访问我们的网络抓取工具。

响应头

接下来我们注意到我们的响应是元数据 – 也称为标头。
在网络抓取方面，响应标头提供了一些关于连接功能和效率的重要信息。

例如，Set-Cookieheader 请求我们的客户端为将来的请求保存一些 cookie，这可能对网站功能至关重要。其他标头（例如Etag）Last-Modified旨在帮助客户端进行缓存以优化资源使用。

最后，就像请求标头一样，以为前缀的标头是X-我们可能需要集成到我们的抓取工具中的自定义 Web 功能标头。

我们简要地忽略了核心 HTTP 组件，现在是时候尝试一下，看看 HTTP 在实际 Node 中是如何工作的了！

发出 GET 请求

现在我们已经熟悉了 HTTP 协议及其在 javascript 抓取中的使用方式，让我们发送一些请求吧！

让我们从一个基本的 GET 请求开始：

import axios from 'axios';

const response = await axios.get('https://httpbin.org/get');
console.log(response.data);

这里我们使用http://httpbin.org HTTP 测试服务来检索一个简单的 HTML 页面。运行时，此脚本应打印有关我们提出的请求的基本详细信息：

{
  args: {},
  headers: {
    Accept: 'application/json, text/plain, */*',
    Host: 'httpbin.org',
    'User-Agent': 'axios/0.25.0',
  },
  origin: '180.111.222.223',
  url: 'https://httpbin.org/get'
}

发出 POST 请求

POST 类型请求用于通过其交互功能（如登录、搜索功能或结果过滤）与网站进行交互。

对于这些请求，我们的爬虫需要发送一些东西来接收响应。那东西通常是一个 JSON 文档：

import axios from 'axios';

const response = await axios.post('https://httpbin.org/post', {'query': 'cats', 'page': 1});
console.log(response.data);

我们可以 POST 的另一种文档类型是 表单数据类型。为此，我们需要做更多的工作并使用form-data包：

import axios from 'axios';
import FormData from 'form-data';

function makeForm(data){
    var bodyFormData = new FormData();
    for (let key in data){
        bodyFormData.append(key, data[key]);
    }
    return bodyFormData;
}

const resposne = await axios.post('https://httpbin.org/post', makeForm({'query': 'cats', 'page': 1}));
console.log(response.data);

Axios 足够聪明，可以根据数据参数填写所需的标头详细信息（如content-type和）。content-length所以，如果我们要发送一个对象，它将设置Content-Type标题application/json并将数据形成为application/x-www-form-urlencoded– 非常方便！

设置标题

正如我们之前所述，我们的请求必须提供一些元数据，这有助于服务器确定要返回的内容或是否与我们合作。
通常，此元数据可用于识别网络抓取器并阻止它们，因此在抓取时我们应避免脱颖而出并模仿现代网络浏览器。

启动所有浏览器设置User-Agent和Accept标题。要在我们的axios爬虫中设置它们，我们应该创建一个Client并从 Chrome 网络浏览器复制值：

import axios from 'axios';

const response = await axios.get(
    'https://httpbin.org/get', 
    {headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36',
        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
    }}
);
console.log(response.data);<h3 id="tip-set-default-settings">提示：设置默认设置

在抓取时，我们通常希望将相同的配置应用于多个请求，例如为我们的抓取器发出的每个请求设置那些 User-Agent 标头，以避免被阻止。

Axios 带有一个很棒的快捷方式，允许为所有连接配置默认值：

import axios from 'axios';

const session = axios.create({
    headers: {'User-Agent': 'tutorial program'},
    timeout: 5000,
    proxy: {
            host: 'proxy-url',
            port: 80,
            auth: {username: 'my-user', password: 'my-password'}
        }
    }
)

const response1 = await session.get('http://httpbin.org/get');
console.log(response1.data);
const response2 = await session.get('http://httpbin.org/get');
console.log(response2.data);

在这里，我们创建了一个实例，axios它将对每个请求应用自定义标头、超时和代理设置！

有时在网络抓取时我们关心持久连接状态。对于我们需要登录或配置首选项（如货币或语言）的网站 – cookie 用于完成所有这些工作！

不幸的是，默认情况下 axios 不支持 cookie 跟踪，但是可以通过axios-cookiejar-support扩展包启用它：

import axios from 'axios';
import { CookieJar } from 'tough-cookie';
import { wrapper } from 'axios-cookiejar-support';

const jar = new CookieJar();
const session = wrapper(axios.create({ jar }));

async function setLocale(){
    // set cookies:
    let respSetCookies = await session.get('http://httpbin.org/cookies/set/locale/usa');
    // retrieve existing cookies:
    let respGetCookies = await session.get('http://httpbin.org/cookies');
    console.log(respGetCookies.data);
}

setLocale();

在上面的示例中，我们使用 cookie jar 对象配置 axios 实例，它允许我们在网络抓取会话中拥有持久性 cookie。如果我们运行这个脚本，我们应该看到：

{ cookies: { locale: 'usa' } }

现在我们已经熟悉了 HTTP 连接以及如何在axios HTTP 客户端包中使用它，让我们来看看网络抓取过程的另一半：解析 HTML 数据！

解析 HTML

HTML（超文本标记语言）是一种支持网络的文本数据结构。它的伟大之处在于它旨在成为机器可读的文本内容，这对于网络抓取来说是个好消息，因为我们可以使用 javascript 代码轻松解析相关数据！

HTML 是一种树型结构，易于解析。例如，让我们来看这个简单的 HTML 内容：

<head>
  <title>
  </title>
</head>
<body>
  <h1>Introduction</h1>
  <div>
    <p>some description text: </p>
    <a class="link" href="http://example.com">example link</a>
  </div>
</body>

这是一个简单网站可能提供的基本 HTML 文档。你已经可以通过文本的缩进看到树状结构，但我们甚至可以进一步说明它：