如何找到在 Inspector>Network（网络抓取）上执行的特定事件？

Question

我一直在使用以下YOUTUBE TUTORIAL 来学习如何使用网络抓取。由于特定的WEBSITE 更改了它们的核心结构，我已经设法完成了本教程并进行了一些修改。本教程使用的代码可以在这里找到：https://github.com/beaucarnes/fcc-project-tutorials/blob/master/node-web-scraping/index.js。现在我想修改这段代码，以便它可以实现我的目标：

“使用来自另一个网站 ec.europa.eu 的搜索引擎，并尝试将该页面中的数据（即 JOB-TITLE）返回到我的 NODE 控制台。”

在 YouTube 教程中，调用来检索数据的事件是由演示者指定的，但实际上并没有解释他是如何使用它的。在我要检索信息的网站中，该页面上调用了 390 个事件。我想确定提交时搜索引擎调用了哪个Request-URL。截图如下：

我已经搜索了这些事件，并试图找到搜索引擎调用的事件。我在图中突出显示了对我来说更有意义的事件名称，但我不确定是否是这种情况。

我还尝试在 Stack Overflow 的搜索引擎中查找调用的事件 (Request-URL)，但找不到从 Inspector>Networks 调用的 JS 事件。

我的目标是确定在任何网站中调用的特定事件。任何信息都会非常感谢，谢谢！ :D

---

更新：

const cheerio = require('cheerio');
const Table = require('cli-table');
const rp = require('request-promise');

const talbe = new Table({
    head: ['Job Title', 'URL']
});


const options = {
    url: 'https://ec.europa.eu/eures/eures-searchengine/page/jv-search/search?lang=en&app=2.4.1-build-2',
    json: true
}

rp(options).then(
    (data) => {
        console.log("DONE");
    }
).catch(
    (err) => {
        console.log(err);
    }
);

这将返回以下错误：

StatusCodeError: 500 - undefined
    at new StatusCodeError (C:\Users\loizo\Desktop\eures_test\node_modules\request-promise-core\lib\errors.js:32:15)
    at Request.plumbing.callback (C:\Users\loizo\Desktop\eures_test\node_modules\request-promise-core\lib\plumbing.js:104:33)        
    at Request.RP$callback [as _callback] (C:\Users\loizo\Desktop\eures_test\node_modules\request-promise-core\lib\plumbing.js:46:31)
    at Request.self.callback (C:\Users\loizo\Desktop\eures_test\node_modules\request\request.js:185:22)
    at Request.emit (events.js:315:20)
    ....

Answer 1

您就快到了，在网络工具中，您可以操纵概览来查看请求的各个部分。 打开站点的网络工具，确保您先清除所有请求。然后进行搜索。

亲自向您展示或观看视频要容易得多。但这里有一组图像可指导您查看在网站上执行操作时发出的请求的特定部分。

查看图片here。我已经在下面单独解释了它们

图片1：

• 在这里，我已经加载了您提供的页面并单击了检查和网络选项卡。
• 我正在单击您可以看到的红色按钮以清除服务器的所有这些请求。

图片2：

• 这就是您清除请求时的样子

图片3：

• 我已经搜索了开发者，您可以在下方看到对此操作的请求。

图片4：

• 现在，您可以在概览中选择该操作的请求/响应部分。在这里，我正在磨练该行动的第一部分。您只需单击并拖动即可。自己感受一下。
• 我现在可以在下面看到这 5 个请求
• 前四个请求是 GET 请求，并没有真正告诉我们太多
• 第五个请求是一个 POST 请求，这是一个发布数据的请求，图片右侧的信息会告诉您它发布到哪里以及它得到什么响应。

图片5

• 这是与之前相同的图像，但我向下滚动了一点以查看有效负载。这是在该网站上进行搜索时需要与 POST HTTP 请求一起提供的关键内容。

编码示例

请注意我帖子中的 cmets。下面是获取所需 JSON 数据的代码示例。

我从未在 node.js 中编码过的项圈，所以请注意这一点！但是它确实有效。

const cheerio = require('cheerio');
const Table = require('cli-table');
const rp = require('request-promise');

const talbe = new Table({
    head: ['Job Title', 'URL']
});


const options = {
    method: 'POST',
    url: 'https://ec.europa.eu/eures/eures-searchengine/page/jv-search/search?lang=en&app=2.4.1-build-2',
    json: true,
    body: {
        "keywords":[{"keyword":"developer","specificSearchCode":"EVERYWHERE"}],"positionScheduleCodes":[],"positionOfferingCodes":[],"educationLevelCodes":[],"euresFlagCodes":[],"nutsCodes":[],"notSpecifiedInNutsCodes":[],"requiredExperienceCodes":[],"solidarityContextCodes":[],"otherBenefitsCodes":[],"occupationUris":[],"includeJobsWithoutBenefits":false,"requiredLanguages":[],"includeJobsWithoutRequiredLanguages":false,"sortSearch":"BEST_MATCH","resultsPerPage":10,"page":1,"sessionId":"g07h0s8tfmmtfr5u9lible"
    },
    headers: {
        'Connection': 'keep-alive',
        'ajax-call': 'true',
        'Accept': 'application/json, text/plain, */*',
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36',
        'Content-Type': 'application/json;charset=UTF-8',
        'Origin': 'https://ec.europa.eu',
        'Sec-Fetch-Site': 'same-origin',
        'Sec-Fetch-Mode': 'cors',
        'Sec-Fetch-Dest': 'empty',
        'Referer': 'https://ec.europa.eu/eures/eures-searchengine/page/main?lang=en',
        'Accept-Language': 'en-US,en;q=0.9',
        }
    
}

rp(options).then(
    (data) => {
        console.log("Got results =", data);
    }
).catch(
    (err) => {
        console.log(err);
    }
);

解释

在添加到您自己的代码方面，我已指定我们正在执行 POST 请求。

要获得发出成功 HTTP 请求所需的其他内容，您可以在网络工具中右键单击请求，有很多选项，但您可以将其复制到 CURL(bash)。我使用https://curl.trillworks.com/ 来转换 curl 命令。你可以选择node.js。

我复制了该网站上的标题。

body {} 应该包含我们的有效负载，在这种情况下，我复制了 curl.trillworks 上的数据字符串。

我得到了想要的输出。

附加信息

1. 逆向工程 HTTP 请求是关于模仿请求，让服务器相信你不是机器人。
2. 您可以尝试只向服务器发出请求而不发布任何其他内容，在这种情况下它不起作用，您会收到状态代码 500 错误。
3. 您必须考虑模拟请求所需的标头、任何 cookie 和参数。
4. 这里您只需要标题和参数（即您在本网站上搜索时所做的搜索词）
5. 请记住，它是一个 POST HTTP 请求，您正在向服务器提供信息并期待基于该帖子的响应。

附加链接

请求文档：https://www.npmjs.com/package/request-promise

这有助于编写 JSON 请求。没有完全解释 body 参数可以包含我们想要的任何数据。我迈出了那一步，它奏效了。

https://beshaimakes.com/js-scrape-data#case-1--using-apis-directly

仅用于额外的抓取以及关于 JSON 抓取的 abit。没有完全解释它的标题部分，但希望通过这个例子你可以跟随。

https://stackabuse.com/the-node-js-request-module/

帮助我了解 Request 库，在我让你的代码工作后发现这个。