jQuery.getJSON - Access-Control-Allow-Origin-Problem

Können Sie auch verwenden möchten, JSON-P statt (siehe unten). Zunächst wird eine kurze Erklärung.

Den header, die Sie erwähnt haben, ist aus der Cross-Origin Resource Sharing standard. Vorsicht, dass es nicht unterstützt von einigen Browsern auch tatsächlich genutzt werden, und auf anderen Browsern (Microsoft Seufzer) es erfordert die Verwendung von einem speziellen Objekt (XDomainRequest) anstelle der standard - XMLHttpRequest dass jQuery verwendet. Es erfordert auch, dass Sie server-side Ressourcen, die explizit erlauben, die anderen Ursprungs (www.xxxx.com).

, Um die JSON-Daten, die Sie anfordern, haben Sie grundsätzlich drei Optionen:

1. Wenn möglich, können Sie maximal-kompatibel, indem korrigiert wird, wie der Speicherort der Dateien, die Sie laden, also haben Sie den gleichen Ursprung hat wie das Dokument, das Sie laden Sie in die. (Ich nehme an, Sie muss das laden per Ajax, damit die Same-Origin-Policy Problem auftauchen.)

2. Verwenden JSON-P, die nicht Gegenstand der SOP. jQuery hat eine eingebaute Unterstützung für Sie in Ihrer ajax call (setzen Sie einfach dataType "jsonp" und jQuery wird alles tun, das client-seitige arbeiten). Dies erfordert server-Seite ändert sich, aber nicht sehr groß; im Grunde, was Sie haben, ist die Generierung der JSON-Antwort, sieht nur für einen query-string-parameter namens "callback" und umschließt das JSON in JavaScript-code, der Aufruf der Funktion. E. g., wenn Ihre aktuelle JSON-Antwort ist:

   {"weather": "Dreary start but soon brightening into a fine summer day."}

   Dein Skript Aussehen würde, für die "callback" - parameter der Abfragezeichenfolge (lassen Sie uns sagen, dass ist der Wert des Parameters "jsop123") und wickelt das JSON in der syntax für eine JavaScript-Funktion aufrufen:

   jsonp123({"weather": "Dreary start but soon brightening into a fine summer day."});

   Das ist es. JSON-P ist sehr weitgehend kompatibel (weil es funktioniert über JavaScript script - tags). JSON-P ist nur für GET jedoch nicht POST (wieder, weil es funktioniert über script - tags).

3. Verwenden CORS (der Mechanismus, bezogen auf den header, den du zitiert hast). Details in die Spezifikation oben verlinkten, aber im Grunde:

   A. Der browser sendet dein server eine "preflight" - Nachricht mit der OPTIONS HTTP-verb (- Methode). Darin enthalten sind auch die verschiedenen überschriften, die es senden würde, mit der GET oder POST sowie die Header "Origin", "Access-Control-Request-Methode" (z.B. GET oder POST) und "Access-Control-Request-Header" (Header es senden will.

   B. PHP entscheidet auf der Grundlage dieser Informationen, ob die Anfrage in Ordnung ist, und wenn ja, antwortet mit "Access-Control-Allow-Origin", "Access-Control-Allow-Methods" und "Access-Control-Allow-Header" Header mit dem Wert, den es zu erlauben. Sie nicht senden alle Körper (Seite) mit dieser Antwort.

   C. Der browser sucht auf Ihre Antwort, und siehe, ob es zulässig ist, Ihnen die tatsächlichen GET oder POST. Wenn dem so ist, wird es zu senden, dass der Wunsch, wieder mit dem "Ursprung" und verschiedene "Access-Control-Request "-xyz" - Header.

   D. Ihre PHP-untersucht werden diese Header wieder, um sicherzustellen, Sie sind immer noch okay, und wenn, so auf die Anfrage reagiert.

   In pseudo-code (ich habe nicht viel getan, PHP, und so bin ich nicht versuchen zu tun, PHP-syntax hier):

   //Find out what the request is asking for
   corsOrigin = get_request_header("Origin")
   corsMethod = get_request_header("Access-Control-Request-Method")
   corsHeaders = get_request_header("Access-Control-Request-Headers")
   if corsOrigin is null or "null" {
       //Requests from a `file://` path seem to come through without an
       //origin or with "null" (literally) as the origin.
       //In my case, for testing, I wanted to allow those and so I output
       //"*", but you may want to go another way.
       corsOrigin = "*"
   }
   
   //Decide whether to accept that request with those headers
   //If so:
   
   //Respond with headers saying what's allowed (here we're just echoing what they
   //asked for, except we may be using "*" [all] instead of the actual origin for
   //the "Access-Control-Allow-Origin" one)
   set_response_header("Access-Control-Allow-Origin", corsOrigin)
   set_response_header("Access-Control-Allow-Methods", corsMethod)
   set_response_header("Access-Control-Allow-Headers", corsHeaders)
   if the HTTP request method is "OPTIONS" {
       //Done, no body in response to OPTIONS
       stop
   }
   //Process the GET or POST here; output the body of the response

   Nochmals betont werden, dass dies pseudo-code.

InformationsquelleAutor der Antwort T.J. Crowder