Auf der angeforderten Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden. Herkunft ‘…’ wird daher kein Zugriff gewährt

Ich verwende .htaccess, um URLs umzuschreiben, und ich habe HTML-Basis-Tags verwendet, damit es funktioniert.

Wenn ich jetzt versuche, eine Ajax-Anfrage zu stellen, erhalte ich die folgende Fehlermeldung:

XMLHttpRequest kann nicht geladen werden http://www.example.com/login.php. Auf der angeforderten Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden. Herkunft ‘http://example.com‘ wird daher kein Zugriff gewährt.

Benutzen addHeader Anstatt zu verwenden setHeader Methode,

response.addHeader("Access-Control-Allow-Origin", "*");

* in obiger Zeile erlauben access to all domains.

Für das Zulassen access to specific domain only:

response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");

Überprüfen Sie dies blog post.

Warum wird der Fehler ausgelöst:

Der JavaScript-Code wird durch die begrenzt Same-Origin-Policywas bedeutet, von einer Seite bei www.example.comkönnen Sie nur (AJAX-)Anfragen an Dienste stellen, die sich unter befinden exakt dieselbe Domäne, in diesem Fall genau www.example.com (nicht example.com – ohne das www – oder whatever.example.com).

In Ihrem Fall versucht Ihr Ajax-Code, einen Dienst in zu erreichen http://wordicious.com von einer Seite befindet sich unter http://www.wordicious.com.

Obwohl sie sich sehr ähnlich sind, sind sie es nicht dieselbe Domäne. Und wenn sie sich nicht in derselben Domäne befinden, ist die Anfrage nur erfolgreich, wenn die Antwort des Ziels eine enthält Access-Control-Allow-Origin Kopfzeile darin.

Als Ihre Seite/Dienst unter http://wordicious.com nie konfiguriert wurde, um einen solchen Header anzuzeigen, wird diese Fehlermeldung angezeigt.

Lösung:

Wie gesagt, die Ursprungs- (wo sich die Seite mit JavaScript befindet) und die Zieldomäne (wo das JavaScript zu erreichen versucht) müssen die Domains sein genau gleich.

Ihr Fall scheint ein Tippfehler zu sein. Sieht aus wie http://wordicious.com und http://www.wordicious.com sind tatsächlich der gleiche Server/die gleiche Domäne. Um das Problem zu beheben, geben Sie das Ziel und den Ursprung gleichermaßen ein: machen Sie Ajax-Code-Anfrageseiten/Dienste zu http://www.wordicious.com nicht http://wordicious.com. (Vielleicht platzieren Sie die Ziel-URL relativ, wie z '/login.php'ohne die Domäne).

Ganz allgemein:

Wenn das Problem kein Tippfehler ist, wie es bei dieser Frage der Fall zu sein scheint, wäre die Lösung zu Ergänzen Sie die Access-Control-Allow-Origin zur Zieldomäne. Das Hinzufügen hängt natürlich von dem Server/der Sprache hinter dieser Adresse ab. Manchmal reicht eine Konfigurationsvariable im Tool aus. In anderen Fällen müssen Sie die Header selbst durch Code hinzufügen.

Für .NET-Server kann dies in web.config wie unten gezeigt konfiguriert werden

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

Sagen wir zum Beispiel, wenn die Serverdomäne ist http://live.makemypublication.com und Kunde ist http://www.makemypublication.com konfigurieren Sie dann in der web.config des Servers wie unten

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 </system.webServer>

Wenn Sie diese Fehlermeldung vom Browser erhalten:

Auf der angeforderten Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden. Origin ‘…’ ist daher nicht zugriffsberechtigt

Wenn Sie versuchen, eine Ajax-POST/GET-Anforderung an einen Remote-Server zu senden, der sich Ihrer Kontrolle entzieht, vergessen Sie bitte diese einfache Lösung:

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

Was Sie wirklich tun müssen, insbesondere wenn Sie nur JavaScript für die Ajax-Anfrage verwenden, ist ein interner Proxy, der Ihre Anfrage entgegennimmt und an den Remote-Server weiterleitet.

Führen Sie zuerst in Ihrem JavaScript einen Ajax-Aufruf an Ihren eigenen Server durch, etwa so:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Erstellen Sie dann eine einfache PHP-Datei namens proxy.php, um Ihre POST-Daten zu verpacken und sie als Parameter an den Remote-URL-Server anzuhängen. Ich gebe Ihnen ein Beispiel dafür, wie ich dieses Problem mit der Expedia-Hotelsuch-API umgehe:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url="http://api.ean.com/ean-services/rs/hotel/v3/list?" . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Indem Sie Folgendes tun:

 echo json_encode(file_get_contents($url));

Sie machen nur die gleiche Abfrage, aber auf der Serverseite und danach sollte es gut funktionieren.

Sie müssen dies am Anfang Ihrer PHP-Seite “login.php” hinzufügen.

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

Sie müssen die Header-Schlüssel / -Werte in die Antwort der Optionsmethode einfügen. zum Beispiel, wenn Sie Ressourcen bei haben http://mydomain.com/myresource
dann schreiben Sie in Ihren Servercode

//response handler
void handleRequest(Request request, Response response) {
    if(request.method == "OPTIONS") {
       response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com")
       response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
       response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }



}

Ändern Sie im Wesentlichen die API-Header-Antwort, indem Sie die folgenden zusätzlichen Parameter hinzufügen.

Zugriffssteuerung-Zulassen-Anmeldeinformationen: wahr

Access-Control-Allow-Origin: *

Aber das ist keine gute Lösung, wenn es um die Sicherheit geht