Javascript: 从网站中获取元素并将其显示在我的网站上？

Question

我一直在尝试从 Hacker News 获取头条新闻报道，尽管来自任何网站的示例都可以。

顺便说一句，这是我的代码：


let getHTML = function (url, callback) {

    // Feature detection
    if (!window.XMLHttpRequest) return;

    // Create new request
    let xhr = new XMLHttpRequest();

    // Setup callback
    xhr.onload = function () {
        if (callback && typeof (callback) === 'function') {
            callback(this.responseXML);
        }
    };

    // Get the HTML
    xhr.open('GET', url);
    xhr.responseType = 'document';
    xhr.send();

};

getHTML('https://news.ycombinator.com/news', function (response) {
    let someElem = document.querySelector('#someElementFromMyPage');
    let someOtherElem = response.querySelector('#someElementFromOtherPage');
    someElem.innerHTML = someOtherElem.innerHTML;
});

这个应该显示来自其他页面的元素并将其带到我的页面.

Answer 1

当我运行您的代码时，我在浏览器 dev-tools 控制台 (more details here) 中收到 CORS 错误。

问题

基本上目标网站 (https://news.ycombinator.com/news) 正在限制浏览器请求它的方式。并且浏览器符合并尊重这个限制。

JS代码发出请求。
浏览器读取响应并查看来自 (https://news.ycombinator.com/news)
因为有X-Frame-Options: DENY和X-XSS-Protection: 1 mode=block浏览器不会让你读取JS代码中的请求，所以你会报错。

解决方案

有很多方法可以解决 CORS 错误，您可以自己研究它们：

通过 proxy-server 收集请求，通过另一个服务器路由 CORS 请求，该服务器剥离了讨厌的 CORS headers。 maybe this?
运行 web-scraping 的服务器，服务器不必像浏览器那样尊重 Headers，因此您可以获取任何内容。 maybe try this

在浏览器中抓取越来越难，因此您需要使用其他解决方案从其他站点获取内容。

希望对您有所帮助！

Javascript: 从网站中获取元素并将其显示在我的网站上？

Javascript: Take element from website and display it on my website?

javascript

web-crawler