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

当我运行您的代码时，我在浏览器开发工具控制台 (more details here) 中收到一个 CORS 错误。

问题

基本上，目标网站 (https://news.ycombinator.com/news) 限制了浏览器如何请求它。并且浏览器符合并尊重此限制。

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

解决方案

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

• 通过代理服务器过滤请求，通过另一台服务器路由 CORS 请求，从而去除讨厌的 CORS 标头。 maybe this?

• 运行服务器进行网络抓取，服务器不必像浏览器那样尊重标头，因此您可以获取任何内容。 maybe try this

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

希望这会有所帮助！