jQuery.getJSON - Access-Control-Allow-Origin Problème

Vous pouvez vouloir utiliser JSON-P à la place (voir ci-dessous). D'abord une explication rapide.

L'en-tête que vous avez mentionné, c'est à partir de la Origine De La Croix De Partage De Ressources standard. Attention, il est pas pris en charge par certains navigateurs personnes réellement utiliser, et sur d'autres navigateurs (Microsoft, soupir), il nécessite l'utilisation d'un objet spécial (XDomainRequest) plutôt que la norme XMLHttpRequest qui utilise jQuery. Elle vous demande aussi de changer de serveur-côté des ressources d'autoriser explicitement les autre origine (www.xxxx.com).

Pour obtenir les données JSON que vous demandez, en gros, vous avez trois options:

1. Si possible, vous pouvez être au maximum-compatible en modifiant l'emplacement des fichiers que vous êtes en train de charger, de sorte qu'ils ont la même origine que le document que vous êtes en train de charger dans. (Je suppose que vous devez être chargé via Ajax, d'où le Même La Politique De L'Origine question qui se montre.)

2. Utilisation JSON-P, ce qui n'est pas soumis à la SOP. jQuery a un support intégré pour elle dans son ajax appel (juste mis dataType à "jsonp" et jQuery va faire tout le côté client de travail). Cela nécessite des modifications côté serveur, mais pas très gros; fondamentalement, ce que vous avez c'est la génération de la réponse JSON semble juste pour un paramètre de chaîne de requête appelé "rappel" et enroule le JSON dans le code JavaScript qui appelle la fonction. E. g., si votre réponse JSON est:

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

   Votre script va chercher le "rappel" paramètre de chaîne de requête (disons que la valeur du paramètre est "jsop123") et des emballages de JSON dans la syntaxe d'un appel de fonction JavaScript:

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

   Que c'est. JSON-P est très largement compatible (parce qu'il fonctionne via JavaScript script tags). JSON-P est uniquement pour GET, cependant, ne pas POST (encore une fois parce qu'il fonctionne via script tags).

3. Utilisation de la SCRO (le mécanisme lié à l'en-tête que vous avez cité). Détails dans la spécification ci-dessus, mais en gros:

   A. Le navigateur va envoyer votre serveur en un "contrôle en amont" message à l'aide de la OPTIONS HTTP verbe (méthode). Il contiendra les différents en-têtes de les envoyer avec le GET ou POST ainsi que les en-têtes "Origine", "Contrôle d'Accès-Demande-de la Méthode" (p. ex., GET ou POST), et "Access-Control-Request-Headers" (les en-têtes de il veut envoyer.

   B. PHP décide, en se fondant sur cette information, si la demande est acceptable et, dans l'affirmative répond avec le "Access-Control-Allow-Origin", "Access-Control-Allow-Méthodes", et "Access-Control-Allow-les en-Têtes" en-têtes avec les valeurs qu'elle permettra. Vous n'envoyez pas de tout le corps (de la page) avec cette réponse.

   C. Le navigateur va chercher à votre réponse, et de voir s'il est autorisé à vous envoyer le réel GET ou POST. Si donc, il doit envoyer sa demande, à nouveau avec "l'Origine" et divers "Access-Control-Demande-xyz" en-têtes.

   D. PHP examine les en-têtes de nouveau pour s'assurer qu'ils sont encore en bon état, et si oui, répond à la demande.

   Dans pseudo-code (je n'ai pas fait beaucoup de PHP, donc je n'essaie pas de faire de syntaxe PHP ici):

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

   De nouveau en soulignant que c'est de la pseudo-code.