In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin '…' ist daher kein Zugriff gestattet

Ich verwende .htaccess, um URLs neu zu schreiben, und ich habe das HTML-Basistag verwendet, damit es funktioniert.

Wenn ich jetzt versuche, eine Ajax-Anfrage zu stellen, wird folgende Fehlermeldung angezeigt:

XMLHttpRequest kann nicht geladen werden http://www.example.com/login.php. In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin ' http://example.com' ist daher kein Zugriff gestattet.

Verwenden Sie addHeaderanstelle der setHeaderMethode,

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

*in der obigen Zeile wird erlauben access to all domains.

Zum Zulassen access to specific domain only:

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

Überprüfen Sie dies blog post.

Warum der Fehler ausgelöst wird:

JavaScript-Code ist durch die Richtlinie mit demselben Ursprung begrenzt. Dies bedeutet, dass Sie von einer Seite unter www.example.comnur (AJAX) Anforderungen an Dienste stellen können, die sich in genau derselben Domäne befinden, in diesem Fall genau www.example.com( nicht example.com - ohne www- oder whatever.example.com).

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

Obwohl sie sehr ähnlich sind, sind sie nicht dieselbe Domäne. Und wenn sie sich nicht in derselben Domäne befinden, ist die Anforderung nur dann erfolgreich, wenn die Antwort des Ziels einen Access-Control-Allow-OriginHeader enthält .

Da Ihre Seite / Ihr Dienst http://wordicious.comunter nie für die Darstellung eines solchen Headers konfiguriert wurde, wird diese Fehlermeldung angezeigt.

Lösung:

Wie gesagt, der Ursprung (wo sich die Seite mit JavaScript befindet) und die Zieldomänen (wo das JavaScript versucht zu erreichen) müssen exakt gleich sein.

Ihr Fall scheint ein Tippfehler zu sein. Sieht aus wie http://wordicious.comund http://www.wordicious.comsind eigentlich der gleiche Server / Domain. Um dieshttp://www.wordicious.comhttp://wordicious.com zu beheben, geben Sie das Ziel und den Ursprung gleichermaßen ein: Lassen Sie Ajax-Code Seiten / Dienste nicht anfordern . (Platzieren Sie die Ziel-URL möglicherweise relativ '/login.php'ohne die Domain).

Allgemeiner gesagt:

Wenn das Problem nicht ein Tippfehler ist wie derjenige diese Frage zu sein scheint, wäre die Lösung zu sein , die hinzufügen , Access-Control-Allow-Originin die Zieldomäne . Das Hinzufügen hängt natürlich vom Server / der Sprache ab, die hinter dieser Adresse steht. Manchmal reicht eine Konfigurationsvariable im Tool aus. In anderen Fällen müssen Sie die Header selbst über 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>

Angenommen, die Serverdomäne lautet http://live.makemypublication.com und der Client lautet http://www.makemypublication.com. Dann konfigurieren Sie sie in der web.config des Servers wie folgt

 <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:

In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin '…' ist daher kein Zugriff gestattet

Wenn Sie versuchen, eine Ajax POST / GET-Anforderung an einen Remote-Server zu senden, auf den Sie keinen Einfluss haben, vergessen Sie bitte diese einfache Lösung:

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

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

Führen Sie zunächst in Ihrem JavaScript einen Ajax-Aufruf an Ihren eigenen Server durch.

$.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 mit dem Namen proxy.php, um Ihre POST-Daten zu verpacken und als Parameter an den Remote-URL-Server anzuhängen. Ich gebe Ihnen ein Beispiel, wie ich dieses Problem mit der Expedia Hotel-Such-API umgehen kann:

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 führen nur die gleiche Abfrage durch, 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. Wenn Sie beispielsweise eine Ressource unter http://mydomain.com/myresource haben , 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 grundsätzlich die Antwort des API-Headers, indem Sie die folgenden zusätzlichen Parameter hinzufügen.

Access-Control-Allow-Credentials: true

Zugriffskontrolle-Zulassen-Ursprung: *

Dies ist jedoch keine gute Lösung, wenn es um die Sicherheit geht

Die Problemumgehung besteht darin, einen Reverse-Proxy zu verwenden, der auf Ihrem Quellhost ausgeführt und an Ihren Zielserver weitergeleitet wird, z. B. Fiddler:

Link hier: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

Oder ein Apache Reverse Proxy ...

Fügen Sie dies Ihrer PHP-Datei oder Ihrem Hauptcontroller hinzu

header("Access-Control-Allow-Origin: http://localhost:9000");

Gelöst mit dem folgenden Eintrag in httpd.conf

#CORS Issue
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"
Header always set Access-Control-Allow-Credentials true

#CORS REWRITE
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
#RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

Bitte finden Sie die in XMLHTTPREQUEST in Javascript verwendete Funktion zum Einrichten der Anforderungsheader.

...

xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://www.example.com");
...
</script>

Referenz: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader