JavaScript - ошибки XMLHttpRequest, Access-Control-Allow-Origin

Я пытаюсь отправить запрос XMLHttpRequest на сайт вставки. Я отправляю объект, содержащий все поля, которые требует API, но я продолжаю получать эту проблему. Я перечитал проблему и подумал:

httpReq.setRequestHeader('Access-Control-Allow-Headers', '*');

Исправил бы это, но это не так. У кого-нибудь есть информация об этой ошибке и / или как я могу ее исправить?

Вот мой код:

(function () {

    'use strict';

    var httpReq = new XMLHttpRequest();
    var url = 'http://paste.ee/api';
    var fields = 'key=public&description=test&paste=this is a test paste&format=JSON';
    var fields2 = {key: 'public', description: 'test', paste: 'this is a test paste', format: 'JSON'};

    httpReq.open('POST', url, true);
    console.log('good');

    httpReq.setRequestHeader('Access-Control-Allow-Headers', '*');
    httpReq.setRequestHeader('Content-type', 'application/ecmascript');
    httpReq.setRequestHeader('Access-Control-Allow-Origin', '*');
    console.log('ok');

    httpReq.onreadystatechange = function () {
        console.log('test');
        if (httpReq.readyState === 4 && httpReq.status === 'success') {
            console.log('test');
            alert(httpReq.responseText);
        }
    };

    httpReq.send(fields2);

}());

А вот точный вывод консоли:

good
ok
Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:40217' is therefore not allowed access. http://paste.ee/api
XMLHttpRequest cannot load http://paste.ee/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:40217' is therefore not allowed access. index.html:1
test

Вот вывод консоли при локальном тестировании в обычном браузере Chromium:

good
ok
XMLHttpRequest cannot load http://paste.ee/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. index.html:1
test
Источник

3 ответа

Решение

Я думаю, что вы пропустили точку контроля доступа.

Краткий обзор причин возникновения CORS: поскольку код JS с веб-сайта может выполнять XHR, этот сайт потенциально может отправлять запросы на другие сайты, маскируясь под вас и используя доверие, которое эти сайты оказывают вам (например, если вы вошли в систему, злонамеренный сайт может пытаться извлечь информацию или выполнить действия, которые вы никогда не хотели) - это называется CSRF-атакой. Чтобы предотвратить это, веб-браузеры имеют очень строгие ограничения на то, что XHR вы можете отправлять - вы обычно ограничены только вашим доменом и так далее.

Теперь иногда для сайта полезно разрешить другим сайтам связываться с ним - первыми кандидатами будут сайты, которые предоставляют API или сервисы, такие как тот, к которому вы пытаетесь получить доступ. CORS был разработан, чтобы позволить сайт A(например, paste.ee) сказать: "Я доверяю сайту B, поэтому вы можете отправить мне XHR". Это указывается сайтом А, отправляющим заголовки "Access-Control-Allow-Origin" в своих ответах.

В вашем конкретном случае кажется, что paste.ee не удосуживается использовать CORS. Лучше всего связаться с владельцем сайта и выяснить, почему, если вы хотите использовать paste.ee со скриптом браузера. В качестве альтернативы, вы можете попробовать использовать расширение (оно должно иметь более высокие привилегии XHR).

Источник

У меня такая же проблема. Логи серверов показали:

DEBUG: <-- origin: null

Я исследовал это, и оказалось, что это не заполнено, когда я звонил из файла с локального диска. Когда я скопировал файл на сервер и использовал его с сервера - запрос работал отлично

Источник 
      function cors() {
            var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("emo").innerHTML = alert(this.responseText);
            }
         };
         xhttp.withCredentials = true;
         xhttp.open("GET", "http://owasp-class.lab:4444/api/get_info", true);
         

         xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencode');

         xhttp.send();
         }
Источник
Другие вопросы по тегам