jQuery AJAX cross domain

Voici deux pages, test.php et testserver.php.

test.php

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Success");
            },
            error:function() {
                alert("Error");
            },
            dataType:"json",
            type:"get"
        }
    )})
</script>

testserver.php

<?php
$arr = array("element1",
             "element2",
             array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

Maintenant mon problème: lorsque ces deux fichiers sont sur le même serveur (localhost ou web server), cela fonctionne et alert("Success")est appelé; S'il se trouve sur des serveurs différents, ce qui signifie testserver.php sur le serveur Web et test.php sur localhost, cela ne fonctionne pas et alert("Error")est en cours d'exécution. Même si l'URL dans ajax est remplacée par http://domain.com/path/to/file/testserver.php

Utilisez JSONP .

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

PHP:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

L'écho peut être faux, cela fait un moment que je n'ai pas utilisé php. Dans tous les cas, vous devez afficher callbackName('jsonString')les guillemets. jQuery transmettra son propre nom de rappel, vous devez donc l'obtenir à partir des paramètres GET.

Et comme Stefan Kendall l'a signalé, $ .getJSON () est une méthode abrégée, mais vous devez ensuite ajouter 'callback=?'à l'URL en tant que paramètre GET (oui, la valeur est?, JQuery le remplace par sa propre méthode de rappel générée).

JSONP est une bonne option, mais il existe un moyen plus simple. Vous pouvez simplement définir l'en- Access-Control-Allow-Origintête sur votre serveur. Le paramétrer sur *acceptera les requêtes AJAX interdomaines de n'importe quel domaine. ( https://developer.mozilla.org/en/http_access_control )

La méthode pour ce faire variera d'une langue à l'autre, bien sûr. Le voici dans Rails:

class HelloController < ApplicationController
  def say_hello
    headers['Access-Control-Allow-Origin'] = "*"
    render text: "hello!"
  end
end

Dans cet exemple, l' say_helloaction acceptera les demandes AJAX de n'importe quel domaine et retournera une réponse "bonjour!".

Voici un exemple des en-têtes qu'il pourrait renvoyer:

HTTP/1.1 200 OK 
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive

Aussi simple soit-il, il a quelques limitations de navigateur. Voir http://caniuse.com/#feat=cors .

Vous pouvez contrôler cela via l'en-tête HTTP en ajoutant Access-Control-Allow-Origin . Le paramétrer sur * acceptera les requêtes AJAX inter-domaines de n'importe quel domaine.

En utilisant PHP, c'est vraiment simple, il suffit d'ajouter la ligne suivante dans le script auquel vous souhaitez avoir accès en dehors de votre domaine:

header("Access-Control-Allow-Origin: *");

N'oubliez pas d'activer le module mod_headers dans httpd.conf.

Vous devez consulter la politique de la même origine :

En informatique, la même politique d'origine est un concept de sécurité important pour un certain nombre de langages de programmation côté navigateur, tels que JavaScript. La stratégie autorise les scripts s'exécutant sur des pages provenant du même site à accéder aux méthodes et propriétés des autres sans restrictions spécifiques, mais empêche l'accès à la plupart des méthodes et propriétés sur les pages de différents sites.

Pour que vous puissiez obtenir des données, il faut:

Même protocole et hôte

Vous devez implémenter JSONP pour le contourner.

J'ai dû charger la page Web à partir du disque local "file: /// C: /test/htmlpage.html", appeler l'URL "http: //localhost/getxml.php" et le faire dans les navigateurs IE8 + et Firefox12 +, utiliser jQuery v1 .7.2 lib pour minimiser le code passe-partout. Après avoir lu des dizaines d'articles, il a finalement compris. Voici mon résumé.

• le script du serveur (.php, .jsp, ...) doit renvoyer l'en-tête de réponse http Access-Control-Allow-Origin: *
• avant d'utiliser jQuery ajax, définissez cet indicateur dans javascript: jQuery.support.cors = true;
• vous pouvez définir l'indicateur une fois ou chaque fois avant d'utiliser la fonction jQuery ajax
• maintenant je peux lire le document .xml dans IE et Firefox. Autres navigateurs que je n'ai pas testés.
• le document de réponse peut être en clair / texte, xml, json ou toute autre chose

Voici un exemple d'appel ajQuery jQuery avec quelques sysouts de débogage.

jQuery.support.cors = true;
$.ajax({
    url: "http://localhost/getxml.php",
    data: { "id":"doc1", "rows":"100" },
    type: "GET",
    timeout: 30000,
    dataType: "text", // "xml", "json"
    success: function(data) {
        // show text reply as-is (debug)
        alert(data);

        // show xml field values (debug)
        //alert( $(data).find("title").text() );

        // loop JSON array (debug)
        //var str="";
        //$.each(data.items, function(i,item) {
        //  str += item.title + "\n";
        //});
        //alert(str);
    },
    error: function(jqXHR, textStatus, ex) {
        alert(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});

Il est vrai que la politique de même origine empêche JavaScript de faire des demandes sur plusieurs domaines, mais la spécification CORS autorise uniquement le type d'accès API que vous recherchez et est prise en charge par le lot actuel des principaux navigateurs.

Découvrez comment activer le partage de ressources d'origine croisée pour le client et le serveur:

http://enable-cors.org/

"Le partage des ressources d'origine croisée (CORS) est une spécification qui permet un accès vraiment ouvert au-delà des limites du domaine. Si vous diffusez du contenu public, veuillez envisager d'utiliser CORS pour l'ouvrir pour un accès universel à JavaScript / navigateur."

C'est possible, mais vous devez utiliser JSONP, pas JSON. Le lien de Stefan vous a orienté dans la bonne direction. La page jQuery AJAX contient plus d'informations sur JSONP.

Remy Sharp a un exemple détaillé utilisant PHP .

J'utilise le serveur Apache, j'ai donc utilisé le module mod_proxy. Activer les modules:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Puis ajouter:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

Enfin, passez proxy-url à votre script.

La sécurité du navigateur empêche de passer un appel ajax depuis une page hébergée sur un domaine vers une page hébergée sur un domaine différent; c'est ce qu'on appelle la " politique de même origine ".

Il existe quelques exemples d'utilisation de JSONP qui incluent la gestion des erreurs.

Cependant, veuillez noter que l'événement d'erreur n'est pas déclenché lors de l'utilisation de JSONP! Voir: http://api.jquery.com/jQuery.ajax/ ou demande jQuery ajax utilisant une erreur jsonp

Depuis les documents Jquery ( lien ):

• En raison des restrictions de sécurité du navigateur, la plupart des demandes "Ajax" sont soumises à la même politique d'origine; la demande ne peut pas récupérer avec succès les données d'un domaine, sous-domaine ou protocole différent.

• Les requêtes de script et JSONP ne sont pas soumises aux mêmes restrictions de politique d'origine.

Je suppose donc que vous devez utiliser jsonp pour la demande. Mais je n'ai pas essayé ça moi-même.

Je connais 3 façons de résoudre votre problème:

1. Tout d'abord, si vous avez accès aux deux domaines, vous pouvez autoriser l'accès à tous les autres domaines en utilisant:

   header("Access-Control-Allow-Origin: *");

   ou juste un domaine en ajoutant du code ci-dessous au fichier .htaccess:

   <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.net|dev02.otherdomain.net)$" AccessControlAllowOrigin=$0 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin </IfModule> </FilesMatch>

2. vous pouvez avoir une demande ajax vers un fichier php sur votre serveur et gérer la demande vers un autre domaine en utilisant ce fichier php.

3. vous pouvez utiliser jsonp, car il n'a pas besoin d'autorisation. pour cela, vous pouvez lire la réponse de notre ami @BGerrissen.

Pour Microsoft Azure, c'est légèrement différent.

Azure a un paramètre CORS spécial qui doit être défini. C'est essentiellement la même chose dans les coulisses, mais simplement définir l'en-tête que mentionne joshuarh ne fonctionnera pas. La documentation Azure pour l'activation de plusieurs domaines peut être trouvée ici:

https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

J'ai bidouillé avec cela pendant quelques heures avant de réaliser que ma plate-forme d'hébergement avait ce paramètre spécial.

ça marche, tout ce dont vous avez besoin:

PHP:

header('Access-Control-Allow-Origin: http://www.example.com');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

JS (jQuery ajax):

var getWBody = $.ajax({ cache: false,
        url: URL,
        dataType : 'json',
        type: 'GET',
        xhrFields: { withCredentials: true }
});