it-swarm.com.de

Cross-Origin Resource Sharing (CORS) -Konzept

Ich habe eine Frage zum Konzept Cross Domain JavaScript.

Es gibt Server (ex Amazon.com), auf denen nur ausgewählte Domains ihren Web-Service verwenden können. Wenn ich also versuche, ihren Service von meinem lokalen Server aus zu nutzen, kann ich dies nicht. Ich habe dies auf meiner Konsole 

Ursprungsübergreifende Anforderung blockiert: Dieselbe Ursprungsrichtlinie verhindert das Lesen die entfernte Ressource bei http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761&W=&JSON=0 . Dies kann durch Verschieben der Ressource in dieselbe Domäne oder .__ behoben werden. Aktivieren von CORS.

PS: Ich habe auch jquery cross domain verwendet, funktionierte aber nicht.

Wenn jedoch eine Domäne, die zu den ausgewählten gehört, um den Webservice von Amazon zu verwenden, über ein JavaScript verfügt, das, wenn wir es in unsere HTML-Datei aufnehmen, funktioniert.

<script src="http://example.com"></script>

Sie haben eine Methode, um Antwort von Ajax zu erhalten.

Meine Fragen sind:

  1. Was passiert, wenn wir von einer Internet-URL auf eine JavaScript-Datei verweisen? Haben wir eine lokale Kopie auf unserem Rechner?
  2. Ist das httpRequest erstellt, wird eine Anforderungsquelle als meine Domäne oder das xyz angezeigt.
15
Sashi Kant

Wichtiger Hinweis vorab: Wenn der Server am anderen Ende dies nicht aktiviert, können Sie mit Ihrem clientseitigen -Code nichts tun, was eine Origin-ajax-Anforderung ermöglicht.

Lassen Sie mich Ihnen einen Hintergrund geben, bevor Sie Ihre Frage beantworten:

Same-Origin-Sicherheitsrichtlinie

Einfach gesagt, die Sicherheitsrichtlinie von Same-Origin stellt sicher, dass Skripts aus einem Origin möglicherweise keinen Inhalt aus anderen Quellen abrufen. Um Ihnen das Konzept von Origin zu erläutern, lassen Sie mich einen Teil der Wikipedia-Artikel der Sicherheitspolitik von Same Origin zitieren:

Die folgende Tabelle enthält eine Übersicht typischer Ergebnisse für Überprüfungen gegen die URL " http://www.example.com/dir/page.html ".

Compared URL                                             Outcome  Reason
-------------------------------------------------------  -------  ----------------------
http://www.example.com/dir/page2.html                    Success  Same protocol and Host
http://www.example.com/dir2/other.html                   Success  Same protocol and Host
http://username:[email protected]/dir2/other.html Success  Same protocol and Host
http://www.example.com:81/dir/other.html                 Failure  Same protocol and Host but different port
https://www.example.com/dir/other.html                   Failure  Different protocol
http://en.example.com/dir/other.html                     Failure  Different Host
http://example.com/dir/other.html                        Failure  Different Host (exact match required)
http://v2.www.example.com/dir/other.html                 Failure  Different Host (exact match required)
http://www.example.com:80/dir/other.html                 Depends  Port explicit. Depends on implementation in browser.

Im Gegensatz zu anderen Browsern schließt Internet Explorer den Port nicht in die Berechnung des Ursprungs ein, wobei stattdessen die Sicherheitszone verwendet wird.

Ihr JavaScript kann zum Beispiel nichts von einem Webserver herunterladen (alias HTTP-Anforderung an einen anderen) als den Server, von dem er stammt. Genau aus diesem Grund können Sie XmlHttpRequests (auch als AJAX bezeichnet) nicht für andere Domänen verwenden.


CORS ist eine Möglichkeit, der Server am anderen Ende (nicht der Clientcode im Browser) kann die Origin-Richtlinie lockern .

Eine vereinfachte Beschreibung von Cross Origin Resource Sharing (CORS) .

Beim CORS-Standard werden neue HTTP-Header hinzugefügt, die es Servern ermöglichen, Ressourcen für zugelassene Origin-Domänen bereitzustellen. Browser unterstützen diese Header und respektieren die von ihnen festgelegten Einschränkungen.

Beispiel: Angenommen, Ihre Site ist http://my-cool-site.com und Sie haben eine Drittanbieter-API in der Domäne http://third-party-site.com, auf die Sie über AJAX zugreifen können.

Und nehmen wir an, dass eine Seite von Ihrem Server my-cool-site.com eine Anfrage an third-party-site.com gestellt hat. Normalerweise lehnt der Browser des Benutzers AJAX -Aufrufe an eine andere Site als Ihre eigene Domäne/Subdomäne gemäß der Same-Origin-Sicherheitsrichtlinie ab. Wenn der Browser und der Server eines Drittanbieters CORS unterstützen, geschieht Folgendes:

  • Browser sendet und Origin HTTP-Header an third-party-site.com

    Origin: http://my-cool-site.com
    
  • Wenn der Drittanbieter-Server Anforderungen von Ihrer Domäne akzeptiert, antwortet er mit einem Access-Control-Allow-Origin-HTTP-Header:

    Access-Control-Allow-Origin: http://my-cool-site.com
    
  • Um alle Domänen zuzulassen, können Server von Drittanbietern diesen Header senden:

    Access-Control-Allow-Origin: *
    
  • Wenn Ihre Site nicht zulässig ist, gibt der Browser einen Fehler aus.

Wenn die Clients über relativ moderne Browser, die CORS unterstützen und Ihr Drittanbieter-Server unterstützt CORS ebenfalls vorhanden sind, kann CORS für Sie nützlich sein.

In einigen veralteten Browsern (z. B. IE8) müssen Sie anstelle von XDomainRequest ein Microsoft-spezifisches XMLHttpRequest-Objekt verwenden, um einen Aufruf zu tätigen, der ordnungsgemäß mit CORS funktioniert. Dies ist nun veraltet. Alle modernen Browser (einschließlich Microsoft) verwenden stattdessen CORS in XMLHttpRequest. Wenn Sie jedoch veraltete Browser unterstützen müssen, wird dies durch diese Seite beschrieben:

Um eine CORS-Anfrage zu erstellen, verwenden Sie einfach XMLHttpRequest in Firefox 3.5+, Safari 4+ und Chrome und XDomainRequest in IE8 +. Wenn der Browser bei Verwendung des XMLHttpRequest-Objekts feststellt, dass Sie versuchen, eine domänenübergreifende Anforderung auszuführen, löst dies nahtlos das Verhalten von CORS aus.

Hier ist eine Javascript-Funktion, die Ihnen beim Erstellen eines browserübergreifenden CORS-Objekts hilft.

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        // XHR has 'withCredentials' property only if it supports CORS
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){ // if IE use XDR
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

Dies ist wiederum nur für veraltete Browser erforderlich.


Aus den oben genannten Gründen können Sie die Webdienste von Amazon nicht anhand Ihres Skripts verwenden. Der Amazon-Server lässt nur das Herunterladen seiner JavaScript-Dateien auf Seiten zu, die von ausgewählten Domänen bereitgestellt werden.

Um Ihre nummerierten Fragen zu beantworten:

    • Die Datei wird vom Browser heruntergeladen, wenn sie sich im selben Origin befindet.
    • Wenn es sich nicht in demselben Origin befindet, wird die Datei heruntergeladen, wenn eine CORS-Anforderung erfolgreich ist.
    • Andernfalls schlägt das Herunterladen des Skripts fehl.
    • Wenn der Download erfolgreich ist, wird der Inhalt der JavaScript-Datei in den Speicher des Browsers geladen, interpretiert und ausgeführt.
  1. Zum Verständnis siehe die Beschreibung zu CORS.

38
sampathsris

CORS ist eine Einstellung, die auf dem Server geändert werden muss. Dadurch können Ressourcen auf einer Webseite von einer externen Domäne angefordert werden. Durch einfaches Ändern des Codes auf dem Client wird die Funktionalität von CORS nicht geändert. 

Der Grund, aus dem Sie innerhalb eines "script" -Tags auf eine Seite zugreifen können, liegt darin, dass Tags anders behandelt werden als alle anderen Daten für Cross-Origin-Anforderungen. In früheren Zeiten konnten Sie CORS mithilfe von JSONP, das JSON-Daten in HTML-Tags speichert, in Ihr System "hacken".

So aktivieren Sie CORS in Apache:

Suchen Sie zuerst Ihre httpd.conf durch Eingabe 

ps -ef | grep Apache

Dadurch erhalten Sie die Position von Apache. Sobald Sie diesen Typ gefunden haben: 

 <Apache-location> -V

Die genaue Position Ihrer httpd.conf wird wie folgt zurückgegeben: 

 -D SERVER_CONFIG_FILE="/etc/Apache2/Apache2.conf"

Nun müssen Sie zur httpd.conf gehen und "/" eingeben, um nach <directory> zu suchen. Sobald Sie das Tag gefunden haben, geben Sie direkt nach dem Tag Folgendes ein:

Header set Access-Control-Allow-Origin "*"

Speichern Sie die Datei und überprüfen Sie, ob die Syntax korrekt ist, indem Sie Folgendes ausführen:

apachectl -t

Wenn dies ausgecheckt ist, führen Sie den Befehl graceful restart aus:

apachectl -k graceful

Nach dem Neustart des Servers sollten Ihre Dateien jetzt über externe Skripts zugänglich sein.

Wenn Sie die Konfiguration aufgrund eines Fehlers nicht speichern konnten, beenden Sie den Editor und geben Sie Folgendes ein:

Sudo chmod 755 httpd.conf

Dadurch hat der Besitzer vollen Zugriff auf die Konfigurationsdatei, aber alle anderen Benutzer können sie nur lesen und ausführen ( http://en.wikipedia.org/wiki/Chmod ).

Um diese Änderungen zu testen, erstellen Sie auf einem externen Server eine neue index.html-Datei und laden Sie sie mit folgendem Befehl:

<!doctype html>
<html>
    <head>
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <!-- Insert Scripts & CSS Here -->
    <link rel="stylesheet" type="text/css" href="http://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css">
    </head>

    <body>

        <script>
        jQuery.get('yourwebsite.com/file.csv', function(data) {
        document.write(data);
        });
        </script>

    </body>

</html>

Die resultierende Ausgabe sollte den Live-Daten-Feed unter yourwebsite.com/file.csv widerspiegeln

Wenn beim Laden dieser HTML-Seite keine Ausgabe angezeigt wird, drücken Sie auf Firefox die Taste f12, um die Entwicklerkonsole zu öffnen. Höchstwahrscheinlich wird ein Fehler angezeigt:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at yourwebsite.com/file.csv. This can be fixed by moving the resource to the same domain or enabling CORS.

Dies bedeutet entweder a) Ihre httpd.conf wurde nicht richtig konfiguriert/nicht gespeichert oder b) Sie haben vergessen, den Webserver neu zu starten. 

3
Andrew

Fügen Sie in der .htaccess-Datei einfach diese Zeile hinzu:

Header set Access-Control-Allow-Origin *
0
Shafiq