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

Когда я запускаю ваш код, я получаю ошибку CORS в консоли dev-tools для браузера ( подробнее здесь ).

Проблема

В основном целевой сайт (https://news.ycombinator.com/news) ограничение того, как браузер может запросить его. И браузер соответствует и соблюдает это ограничение.

1. Код JS делает запрос.
2. Браузер читает ответ и просматривает заголовки HTTP, включенные в ответ от ( https://news.ycombinator.com/news)
3. Поскольку есть X-Frame-Options: DENY и X-XSS-Protection: 1 mode=block, браузер не позволит вам прочитать запрос в коде JS, поэтому вы получите ошибку.

Решение

Существует множество вариантов обхода ошибок CORS, вы можете исследовать их самостоятельно:

• Отправка запросов через прокси-сервер, маршрутизация запросов CORS через другой сервер, который удаляет надоедливые заголовки CORS. может быть, это?

• Запустите сервер для очистки веб-страниц, серверы не должны уважать Заголовки, как это делает браузер, поэтому вы можете ПОЛУЧИТЬ что угодно. возможно, попробуйте это

Очистка в браузере становится все труднее, поэтому вам нужно использовать другие решения для получения контента с других сайтов.

Надеюсь это помогает!