使用 vue 或 javascript 从网站实时抓取 html答案

【问题标题】：Live scraping html from a website using vue or javascript使用 vue 或 javascript 从网站实时抓取 html
【发布时间】：2020-07-30 05:43:03
【问题描述】：

加载数据后，我需要从网站上抓取数据，

有一个进程在 1 到 200 之间循环运行，我需要在进程到达 HTML 本身的 200 后得到结果。

1.有可能吗？我知道与cheerio 合作，但在流程结束后我没有找到处理如何实时捕捉它的方法。

2.当我尝试使用 axios http get request 请求时，如何忽略 CORS 规定。

我不明白如何在 vue.config.js 中使用 proxy。我没有找到有关如何使用它的完整说明。

这是我的代码，当然为了我的安全我更改了一些数据：

  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="(message, index) in messages" :key="index">
        <b>{{ messages.ip }} [{{ message.type }}]:</b>
        {{ message.blocked }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import cheerio from "cheerio";
export default {
  name: "ScrapIP",
  props: {
    msg: String,
    messages: Array
  },
  methods: {
    fetchUrl() {
      for (let i = 0; i < 5; i++) {
        const ip = "192.168.0." + i;
        const url = "http://xxx/yyy.org/lookup/" + ip + ".html";
        axios.get(url).then(response => {
          const $ = cheerio.load(response.data);

          setTimeout(() => {
            if ($(".global_data_cnt_DNSBLBlacklistTest").text() == 243) {
              this.messages.push({
                ip: ip,
                type: "Blacklist Test",
                blocked: $(".global_data_cnt_DNSBLBlacklistTest").text()
              });
            }
          }, 10000);
        });
      }
    }
  },
  created() {
    this.fetchUrl();
  }
};
</script>

【问题讨论】：

如何忽略 CORS。你不能。制作一个简单的服务器端端点并将其传递给 ip，抓取它并返回结果。
感谢Lawrence的评论，重要的是它必须等待被抓取网站上的HTML/js进程首先完成，而不是呈现在客户端上，我认为有一个用cheerio或类似的方法来做到这一点。
这就像 vue 是反应式的，如果你想要一个 processing 微调器/消息，这将通过设置像 loading = true 这样的模型来实现，并且一旦它从 axios 返回将其设置为 false.. 所有常见的东西

标签： javascript vue.js web-scraping axios same-origin-policy

【解决方案1】：

我对 Cheerio 不是很熟悉，但 puppeteer 可能对你想要做的事情有用。它在后台启动一个 chromium 实例来执行您告诉它执行的任务，因此在循环后捕获数据会更容易。唯一的缺点是速度，它在 node.js 中使用。

【讨论】：

是的，我现在就在上面，试着用 vue 来解决它。我面临着它的问题，所以我尝试你的建议来创建节点服务器并以这种方式工作。非常感谢