web-dev-qa-db-fra.com

Utilisation de la propriété ajax crossDomain de jQuery?

Selon jQuery: 

crossDomain (default: false for same-domain requests, true for cross-domain requests) Type: Boolean Si vous souhaitez forcer un demande crossDomain (telle que JSONP) sur le même domaine, définissez la valeur de crossDomain à true. Cela permet, par exemple, au serveur redirection vers un autre domaine. (version ajoutée: 1.5)

Je ne comprends pas ce qui précède.

Si le code est 

$(document).ready(function ()
{
    $.ajax(
    {
        url: 'http://es3.com/Handlers/MyHandler.ashx',
        cache: false,
        dataType: "jsonp",
        ...
        ...
    });
});

function aaa(json)
{
    alert(json.result);
}

Et en spécifiant datatype:jsonp, alors la réponse sera typée application/javascript, car c'est un script qui s'exécutera dans mon navigateur.

Je ne vois aucune raison pourquoi il n'agirait pas comme cela lorsque j'exécute ce code sous le domaine même. (donc - je ne vois pas les usages pour cette propriété).

J'ai fait un échantillon 

J'ai 2 domaines (hôte modifié). es2.com et es3.com.

(remarquez que l'URL dans le code est toujours à es3.com)

Test n ° 1: 

Exécutez le code à partir de es3.com: (volet gauche)
Exécutez le code à partir de es2.com: (volet de droite)
crossDomain:false (défaut si manquant).

regardez les différences: ( http://i.stack.imgur.com/RKyZp.jpg )

 enter image description here

Test n ° 2: 

Exécutez le code à partir de es3.com: (volet gauche)
Exécutez le code à partir de es2.com: (volet de droite)
crossDomain:true <--- avis

( http://i.stack.imgur.com/xEcyd.jpg )  enter image description here

Je ne vois aucune différence.

Question: 

Pourquoi/quand dois-je définir la propriété crossDomain?

javascriptjqueryajax
22
Royi Namir

Le par défaut pour crossDomain est le suivant:

false pour les demandes du même domaine, true pour les demandes crossDomain

Le data-type est interprété différemment selon la valeur du paramètre crossDomain:

"json": évalue la réponse en tant que JSON et renvoie un code JavaScript objet. Les demandes "json" entre domaines sont converties en "jsonp" sauf si la requête inclut jsonp: false dans ses options de requête

Parce que vous utilisez jsonp au lieu de json, vous ne verrez aucune différence dans vos tests.

Quand dois-je définir la propriété crossDomain?

Si vous faites une même demande de domaine json, et votre site peut rediriger la demande vers un autre domaine afin de servir la réponse (via HTTP 3XX), vous devez définir la propriété crossDomain sur true afin que la réponse puisse être lue votre script d'appel.

Cela vous donne l'avantage de récupérer JSON lorsque vous effectuez les mêmes requêtes Origin et les fonctionnalités de JSONP lorsque vous effectuez des requêtes croisées. Si CORS est actif sur le domaine que vous redirigez, vous pouvez définir jsonp: false dans les options de la demande.

Exemples

Faire une demande de example.com à example.org.

  • crossDomain automatiquement défini sur true.
  • Type de données défini sur jsonp.

Résultat: JSONP renvoyé par example.org.

Faire une demande de example.com à example.com.

  • crossDomain automatiquement défini sur false.
  • Type de données défini sur jsonp.

Résultat: JSONP renvoyé par exemple.com.

Faire une demande de example.com à example.org.

  • crossDomain automatiquement défini sur true.
  • Type de données défini sur json.

Résultat: JSONP renvoyé par example.org.

Faire une demande de example.com à example.com.

  • crossDomain automatiquement défini sur false.
  • Type de données défini sur json.

Résultat: JSON renvoyé par exemple.com.

Faire une demande de example.com à example.org.

  • crossDomain automatiquement défini sur true.
  • Type de données défini sur json.
  • jsonp est défini sur false.
  • example.org ne prend pas en charge CORS pour example.com

Résultat: erreur CORS renvoyée par le navigateur.

Faire une requête de example.com à example.com, exemple.com redirige AJAX vers example.edu.

  • crossDomain défini manuellement sur true.
  • Type de données défini sur json.

Résultat: JSONP renvoyé par example.edu.

Faire une demande de example.com à example.org.

  • crossDomain automatiquement défini sur true.
  • Type de données défini sur json.
  • jsonp est défini sur false.
  • example.org prend en charge CORS pour example.com

Résultat: JSON renvoyé par example.org.

Faire une requête de example.com à example.com, exemple.com redirige AJAX vers example.edu.

  • crossDomain automatiquement défini sur false.
  • Type de données défini sur json.
  • example.edu ne supporte pas CORS pour example.com

Résultat: erreur CORS renvoyée par le navigateur.

10
SilverlightFox

Supposons que vous avez un autre domaine spanish.es2.com qui sert les utilisateurs espagnols de votre site Web.

Vous avez l'exigence suivante:

  1. Avoir une page web sur es2.com

  2. Appelez une api sur es2.com et transmettez-lui des informations sur l'utilisateur (ou un cookie), et obtenez des données sur l'utilisateur. Mais si l'utilisateur est espagnol, l'api sur spanish.es2.com doit être appelé pour les mêmes données.

  3. Lorsque vous faites une demande ajax avec jQuery d'es2.com à es2.com, pour un utilisateur espagnol:

    (a) Si crossdomain est désactivé: votre es2.com api trouvera que l'utilisateur est espagnol et effectue donc une redirection http vers spanish.es2.com, qui ne fonctionnera pas en raison de la stratégie de domaine ajax identique et qui échouerait. Redirections dans une URL ajax -> Interdit.

    (b) Lorsque crossdomain est activé: la réponse jsonp de votre api es2.com est en fait chargée en tant que balise de script encapsulée dans une fonction. Par conséquent, une redirection http vers un autre domaine n'a pas d'importance et le contenu est toujours chargé. Par conséquent, ajax fonctionne. Redirections dans src d'une balise de script -> Autorisé.

J'espère que cela rend les choses claires.

4
DhruvPathak

Autant que je sache, l'opération est correcte. Définir dataType sur jsonp créera une requête de type JSONP; avec le résultat écrit dans un bloc de script et exécuté. Par conséquent, forcer JSONP en définissant cross-domain sur true semble redondant.

Toutefois. La documentation indique que "si vous souhaitez forcer une requête interdomaine telle que JSONP", cela implique donc qu'il peut arriver que vous souhaitiez forcer un comportement interdomaine. Je ne suis cependant pas sûr de ce que pourraient être ces cas.

2
user911625

Ce n'est pas faux par défaut lorsqu'il est manquant. Lorsqu'il manque, la valeur par défaut est true si les domaines ne sont pas identiques (comme dans votre premier exemple ci-dessus). Je pense que vous pouvez laisser sa valeur par défaut dans presque tous les cas.

En outre, lors de la définition du paramètre inter-domaines, JQuery tente d'utiliser CORS par défaut, pas JSONP. 

Voici quelques extraits pertinents de la source JQuery: https://github.com/jquery/jquery/blob/master/src/ajax/xhr.js

variable "xhrSupported" ...

xhrSupported = jQuery.ajaxSettings.xhr();

..est utilisé pour vérifier le support CORS ....

support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );

.. qui est coché lors d'appels AJAX ....

jQuery.ajaxTransport(function( options ) {
        var callback;

        // Cross domain only allowed if supported through XMLHttpRequest
        if ( support.cors || xhrSupported && !options.crossDomain )

J'espère que cela t'aides! 

1
morefromalan

Votre question m'a été très utile pour comprendre le problème que j'ai rencontré sur l'utilisation de jsonp avec jQuery. 
Dans mon cas, je devais effectuer un appel JSONP vers un domaine externe.
Mais l'URL devait être construit à partir de notre domaine.

Par exemple, ici, je suppose que mon site Web est sous es2.com 

Appel JSONP sur es2.com
es2.com redirect sur es3.com?newConstructedUrl=someRandomValue
es3.com?newConstructedUrl=NewCoolValue redirect sur es2.com
es2.com reply définissant un nouveau cookie dans la réponse 

Le code fonctionnait bien dans localhost, mais nous n’avions pas de cookie dans es2 .
Et en voyant le débogueur, la demande était en XHR dans es2 environnement 
Nous devions ensuite définir le paramètre crossDomain sur true. La demande JSONP a ensuite été effectuée même dans es2.com

J'espère que mon cas d'utilisation est clair!

0
SamiX

Si vous spécifiez déjà JSONP, le paramètre crossDomain ne fait pas grand chose. Il demande simplement à jQuery de demander JSONP même s'il s'agit d'un domaine local.

Supposons que vous travaillez sur votre machine avec un service local qui renvoie JSON ou JSONP. Vous pouvez utiliser un simple appel $.ajax(), qui fonctionne correctement. En production, toutefois, le serveur redirige votre demande vers un autre domaine si vous remplissez certaines conditions. Prod doit demander JSONP, car parfois la réponse provient de hors-domaine.

Faire cet appel $.ajax() sans crossDomain: true ou datatype: 'jsonp' supposera que la réponse peut être en JSON simple, donc le code échouera en production.

Vous pouvez également obtenir du XML interdomaine par le biais de prestidigitation comme en chargeant JSONP avec YQL , ce qui est vraiment juste en le recouvrant dans JSONP.

0
Sam R