通过 http 调用等读取 html 页面的 DOM答案

【问题标题】：Read the DOM of an html page with an http call or the like通过 http 调用等读取 html 页面的 DOM
【发布时间】：2020-08-31 23:56:35
【问题描述】：

我在以下地址有一个 HTML 页面：
https://www2.casailaria.it/news/
我希望我可以通过 javascript 通过 http 调用读取 DOM 的一些元素。
我正在尝试所有这些，但我仍然有那个该死的控制台错误：CORS header "Access-Control-Allow-Origin" missing。
我尝试了以下 ajax 调用但没有成功，并使用了所谓的参数：

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="utf-8" />
    <title>MAURIZIO</title>
    <link rel="stylesheet" type="text/css" href="background.css">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script>
        $.ajax("https://www2.casailaria.it/news/", {
            dataType: "jsonp",
            cors: true,
            secure: true,
            headers: {
                'Access-Control-Allow-Origin': '*', // or 'Access-Control-Allow-Headers: x-requested-with'
            },
            success: function (response) {
                console.log(response);
            }
        }); 
    </script>
</body>

</html>

我希望我离解决方案不会太远，我想我会绕过它。获得后，我只想执行以下操作：response.getElementsByClassName('myClassOfOtherPage')

我必须添加/删除什么才能使其正常工作？
欢迎使用其他 javascript 解决方案以及 ajax 调用，只要它们是 CDN 的一部分。
提前致谢！

【问题讨论】：

我想你的问题在这里得到了解答stackoverflow.com/questions/31276220/…
我试过了，没有。然而，在那个问题中，引用的是 json 而不是 html 页面。未指定的另一件事是放置代码<IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule> 的位置。这个问题和其他问题几乎从未指定将Access-Control-Allow-Origin : * 放在哪里。只是通过大量浏览我发现它必须进入headers...！仍然是问题没有解决的事实。
我认为您感到困惑。 Access-Control-Allow-Origin 位于响应标头中，不是您将发送到站点的内容。它是一种防止未知域资源访问的安全机制。读这个。 stackoverflow.com/questions/10636611/…
那么我如何读取 dom？如果您考虑一下，我想这是可行的，并且不违反安全性。如果有人可以查看页面源，为什么我不能通过javascript访问dom元素？
我不是这些东西的主人。您尝试访问的网站是一个新闻网站，因此它们将具有非常强大的安全性。您不能在客户端自己启用跨站点访问或读取策略。如果您使用某种服务器端脚本语言，您可以做的是使用代理。 stackoverflow.com/questions/31513450/…

标签： javascript ajax api rest xmlhttprequest

【解决方案1】：

CORS 旨在保护用户免于窃取用户登录的其他网站上的会话和数据。

您尝试通过 AJaX 加载的页面托管在不同的域中。

如果您是在本地开发，并且只想进行测试，则可以使用标志启动 Chrome 以忽略 CORS。 Here is how to do that

如果您想在不同的域中托管您的页面，您需要将 CORS 标头添加到 https://www2.casailaria.it/news/。如果该页面是使用 PHP 创建的，您可以将其添加到该页面：

header("Access-Control-Allow-Origin: *");

请注意，* 是不安全的。它应该是发起 AJaX 调用的页面的域。

【讨论】：

不幸的是我不能使用 php，否则它会很完美，有问题的页面会这样做......
如果您无法更改源页面，那么将永远无法使用 AJAX 从其他域获取它。
我可以，但通过客户端。该页面是静态的，并且完全使用 html css 和 javascript + bootstrap 开发...

【解决方案2】：

我刚刚发现这个网站是由 Apache 托管的。通常，您必须先在 Apache 上启用 cors，然后才能从不同的域调用它。

要在 Apache 上启用 cors，请查看https://enable-cors.org/server_apache.html

在后端站点上启用它之后。再试一次，它应该可以工作。

【讨论】：

欢迎来到 SO。您可能希望将链接的相关部分放在您的答案中，因为这些链接可能会被删除或过期。

【解决方案3】：

您可以尝试实施两个修复：

将 CORS 插件添加到您的浏览器并在您访问页面时启用它。

或

在您的 ajax 调用中提到的 URL 前添加“https://cors-anywhere.herokuapp.com/”。所以结果网址将是 https://cors-anywhere.herokuapp.com/https://www2.casailaria.it/news/

当您在本地访问代码时，这些东西会起作用。

如果您选择选项 2，您的 ajax 调用结构如下：

         $.ajax("https://cors-anywhere.herokuapp.com/https://www2.casailaria.it/news/", {
        dataType: "jsonp",
        cors: true,
        secure: true,
        headers: {
            'Access-Control-Allow-Origin': '*', // or 'Access-Control-Allow-Headers: x-requested-with'
        },
        success: function (response) {
            console.log(response);
        }
    });

【讨论】：

嗯，我看到了一个合理的解决方案。此时，ajax调用应该如何构造呢？可以举个例子吗？
我只是建议修改 url 并保持您的 ajax 调用结构与您的相同。我已将修改后的 ajax 调用添加到我的答案中。请检查

【解决方案4】：

如果 Access-Control-Allow-Origin 标头不允许，则无法从浏览器请求页面。

您可以设置一个小型服务器并在后端毫无问题地请求页面，或者您可以使用某种代理来为您发出请求并返回数据。曾经有一个名为 anyorigin 的代理可以执行此操作，但它处于脱机状态。可能是因为那种东西是粗略的。

【讨论】：