it-swarm.com.de

Der CORS-Header 'Access-Control-Allow-Origin' fehlt

Ich versuche, die webUntis-API ( docs ) für ein Schulprojekt zu verwenden. Im Moment versuche ich nur, irgendeine Verbindung zur API herzustellen.

var result;
const url = 'https://api.webuntis.dk/api/status';
var xhr = new XMLHttpRequest();

xhr.open('GET',url, true);
xhr.setRequestHeader('Access-Control-Allow-Origin','*');
xhr.setRequestHeader('Content-type','application/json');
xhr.setRequestHeader('Access-Control-Allow-Methods','GET');
xhr.setRequestHeader('X-API-KEY', '/*API KEY*/');
xhr.send();


xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        result = xhr.responseType;
        console.log(result);
    }
};

Dieser Code erzeugt die folgende Fehlermeldung:

Ursprungsübergreifende Anforderung blockiert: Dieselbe Origin-Richtlinie verbietet die Lesen der externen Ressource unter https://api.webuntis.dk/api/status (Grund: CORS-Header 'Access-Control-Allow-Origin' fehlt).

Wie kann dieses Problem gelöst werden? Vielleicht ist mein API-Schlüssel falsch?

Haftungsausschluss: Die Fehlermeldung wurde aus dem Deutschen übersetzt.

4
human being

Dies bedeutet im Grunde, dass diese API nicht für den Aufruf von einer anderen Webseite konfiguriert ist. Cross-Origin bezieht sich auf das Erstellen einer HTTP-Anfrage von einer Domäne (Origin) an eine andere. Diese API soll von einer Serveranwendung verwendet werden. Wenn Sie es von einer Webseite aus aufrufen müssen, müssen Sie einen einfachen Proxy-Server erstellen, den Ihre Webseite aufrufen kann, der die Anforderung an webUntis stellt.

1
Bill

Sie stellen eine Anfrage an eine andere Site, in diesem Fall die API unter api.webuntis.dk. Diese Art von Anforderung wird "Herkunftsortanfrage" genannt. 

Damit solche Anforderungen in JavaScript ausgeführt werden können, muss der Server muss auf ihrer Seite dies zulassen .

Dies geschieht, indem der Server spezielle CORS-Header sendet. Der einfachste ist der Header "Access-Control-Allow-Origin".

Ich vermute, der API-Anbieter hat nicht vorausgesehen oder geplant, dass diese API von einem Frontend aus verwendet wird (z. B. JavaScript im Browser). Daher müssen Sie dies umgehen.

Eine Möglichkeit besteht darin, einen eigenen Server einzurichten und den JavaScript-Code an den Server und den Server zu richten und dann an die API zu senden, da serverseitiger Code nicht an CORS-Header gebunden ist.

Alternativ können Sie zum Ausprobieren https://cors.io folgendermaßen vorgehen: 

const url = 'https://cors.io/?https://api.webuntis.dk/api/status';
7
geekonaut

Was ist CORS?

von MDN :

Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, der .__ verwendet. zusätzliche HTTP-Header, damit ein Benutzeragent die Berechtigung zum Zugriff auf .__ erhält. ausgewählte Ressourcen von einem Server auf einem anderen Ursprung (Domäne) als die aktuell genutzte Seite. Ein Benutzeragent erstellt ein Cross-Origin-HTTP request, wenn eine Ressource aus einer anderen Domäne angefordert wird, Protokoll, oder Port als derjenige, von dem das aktuelle Dokument stammt.

LÖSUNG

Sie müssen die CORS-Berechtigung in Ihrem Server einstellen. (https://api.webuntis.dk/api/status)

Einstellbeispiel:

  1. PHP 

    <?php header("Access-Control-Allow-Origin: *"); 

  2. Schienen

    #in config/application.rb config.action_dispatch.default_headers = { 'Access-Control-Allow-Origin' => '*', 'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",") }

hinweis: Ändern Sie * in eine bestimmte URL, die Sie CORS zulassen möchten. '*' wird dringend empfohlen, es sei denn, Sie stellen eine öffentliche API bereit, auf die jeder Verbraucher zugreifen kann.

1
Adrian Rotama

Das Senden von Access-Control-Allow-Origin an den Server löst nichts. Der Server muss Access-Control-Allow-Origin auf * an Ihren Browser senden, damit ajax-Anforderungen ausgeführt werden können.

0