Как отправить асинхронный запрос с localhost на внешний сайт на чистом JS?

Question

[lexstile]

Есть асинхронный запрос:

getData = (url, type='GET', async=true) => {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open(type, url, async);
            
            /*xhr.setRequestHeader('Content-type', 'text/html');
            xhr.setRequestHeader('Accept', 'application/json');
            xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
            xhr.setRequestHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            xhr.setRequestHeader("Access-Control-Max-Age", "3600");
            xhr.setRequestHeader("Access-Control-Allow-Headers", "x-requested-with"); */

            xhr.onprogress = (event) => {
                console.log( 'Получено ' + (event.loaded / 1024).toFixed(3) + ' Кбайт за ' + (event.timeStamp / 1000).toFixed(3) + ' секунд');
            }
            xhr.onload = () => {
                if (xhr.status === 200) {
                    resolve({
                        data: JSON.parse(xhr.responseText),
                        status: xhr.status
                    }); 
                } else {
                    reject({
                        error: xhr.statusText,
                        status: xhr.status
                    });
                }

            }
            xhr.onerror = () => {
                reject({
                    error: xhr.statusText ? xhr.statusText : 'Не удалось выполнить запрос',
                    status: xhr.status
                });
            }
            xhr.send();
        });
    }

Напрямую с локалхост CORS не пускает.
Если через https://cors-anywhere.herokuapp.com/ - работает через раз (непонятно, почему).
Прочитал, что нужно добавить предварительный запрос с OPTIONS, но как это сделать и с какими заголовками - не знаю.

Comments

[shmatuan]

Эти настройки на сервере должны быть

xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.setRequestHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
 xhr.setRequestHeader("Access-Control-Max-Age", "3600");
xhr.setRequestHeader("Access-Control-Allow-Headers", "x-requested-with")

[lexstile]

shmatuan, хорошо, а посылать нужно какие-то заголовки?

Answer 1

[dollar]

Можно создать браузерное расширение и разрешить ему обращаться к любым сайтам.
А ещё научить расширение общаться с localhost. Это не сложно.

Answer 2

[tyzberd]

Почитайте тут https://learn.javascript.ru/xhr-crossdomain
А заголовки должны быть на сторонем сервере.

Answer 3

[profesor08]

fetch

let json = await (await fetch("https://www.google.ru/", {
  mode: "no-cors"
})).json();

console.log(json);

Но сервер должен возвращать заголовок Access-Control-Allow-Origin: *, где * означает что доступ есть с любых доменов, либо вместо * может быть названием твоего домена, чтоб ограничить доступ только для него.

Comments

[lexstile]

Этот заголовок на сервере отдаю.
Но ошибку пишет: await is a reserved word

[profesor08]

(async function() {
  let json = await (await fetch("https://www.google.ru/", {
    mode: "no-cors"
  })).json();
})();