Puppeteer js return 只有 html header 而完整的 html 可以在 chrome 的开发工具中看到

Question

我在我的节点 js 应用程序中使用 puppeteer js 来抓取一个歌词网站，url 指向查询结果（通过 url查询），像这样：

https://shironet.mako.co.il/search?q=fire

在此示例中，查询词是“fire”。

问题是我相信这个网站是用一些 spa 框架构建的，因为无论我如何尝试获取 HTML，我只得到充满一些的 header压缩js函数，并清空html body.

当我在我的开发者工具中检查页面时，我看到正常 HTML。

这是抓取代码：

'use strict'
const pup = require('puppeteer'),
    cherrio = require('cheerio'),
    baseUrl = 'https://shironet.mako.co.il/search?q=';

async function findInitialData(songName){
    if(!songName){
        return 'no song name to scrape'
    }
    console.log(`start findInitialData with songName: ${songName}`)
    
    console.time('initial-scrape')
    pup.launch({
        headless: true
    }).then(
        async browser =>{
            let final = []
            const page = await browser.newPage()
            console.log(`there is a page`)
            
            await page.goto(`${baseUrl}/${songName}`),{waitUntil:'networkidle2'}
            await page.waitFor(10 * 1000);
            const html = await page.content()
            console.log(`html: `,html)
            
            const $ = cherrio.load(html)
            $('a.search_link_name_big').each((index,val)=>{
                console.log(`val: `,val)
                
                let text =  $(value).text().replace(/[\n\t]/gi, '')
                let link = $(value).attr('href')
                if(index%2==1){
                    obj = {}
                    obj["singer"]=text
                    final.push(obj)
                }
                else{
                    obj['link']= link
                    obj['song'] = text
                }
                console.log(`final: `,final)
                browser.close()
                setTimeout(() => {
                    console.timeEnd('initial-scrape')
                    return final
                }, 3000);
                
            })
        }
    )
} 

module.exports = {findInitialData}

当我使用 headless:false 选项时，我在开发工具中看到 body 是空的（并且 header 填充了相同的函数）并且页面没有加载完全没有。

这是我得到的一些回应，包括无头和 non-headless:

<html><head><meta charset="utf-8"><script>function i700(){}i700.F20=function (){return typeof i700.O20.p60==='function'?i700.O20.p60.apply(i700.O20,arguments):i700.O20.p60;};i700.X70=function (){return typeof i700.v70.p60==='function'?i700.v70.p60.apply(i700.v70,arguments):i700.v70.p60;};i700.Z20=function (){return typeof i700.O20.P20==='function'?i700.O20.P20.apply(i700.O20,arguments):i700.O20.P20;};i700.Q60=function (){return typeof i700.Y60.P20==='function'?
...
;winsocks();</script></head><body></body></html>

devtools 中显示的一些 HTML：

    <tbody><tr>
        <td class="global_main_shadow" align="center">
            <table width="1020" cellspacing="0" cellpadding="0" border="0">
                <tbody><tr>
                    <td width="20" valign="top" align="left">
        
                <img src="/jsp/images/global_bg_right.gif" width="20" height="556"></td>
...


</tbody>

我做错了什么？

因为没有任何 body cheerio 部分失败，并且该功能不起作用。

我在这里和 google 中看到了一些对类似问题进行重新分级的答案，但对他们来说 page.waitFor 并添加 waitUntil networkidle2 解决了它，但对我来说不是。

编辑：

我尝试使用 axios 和 insomnia 等工具发送相同 URL 的请求，但他们得到了空的 body 响应。

当我使用 postman 时，我得到了正确的 HTML。

哪个邮递员做对了其他工具做错了？

任何帮助将不胜感激！

Answer 1

const fetch = require("node-fetch");

(async () => {
  const url = "https://shironet.mako.co.il/search?q=fire";
  const result = await fetch(url);
  const response = await result.text();
  console.log(response);
})();

它在我的机器上工作。

Puppeteer js return 只有 html header 而完整的 html 可以在 chrome 的开发工具中看到

Puppeteer js return only html header while full html can be seen in chrome's dev tools

html

javascript

node.js

single-page-application

puppeteer