Une requête CORS POST fonctionne à partir de javascript, mais pourquoi pas avec jQuery?

Question

J'essaie de faire une demande de publication Cross Origin, et je l'ai obtenu en Javascript simple comme ceci:

 var request = new XMLHttpRequest();
var params = "action=something";
request.open('POST', url, true);
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");};
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);
 

Mais je voudrais utiliser jQuery, mais je ne peux pas le faire fonctionner. C'est ce que j'essaye:

 $.ajax(url, {
    type:"POST",
    dataType:"json",
    data:{action:"something"}, 
    success:function(data, textStatus, jqXHR) {alert("success");},
    error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});
 

Cela entraîne un échec. Si quelqu'un sait pourquoi jQuery ne fonctionne pas, merci de nous le faire savoir. Merci.

(J'utilise jQuery 1.5.1 et Firefox 4.0 et mon serveur répond avec un en-tête approprié Access-Control-Allow-Origin)

Answer 1

Mise à JOUR: Comme TimK l'a souligné, ce n'est pas nécessaire avec jquery 1.5.2 plus. Mais si vous souhaitez ajouter des en-têtes personnalisés ou permettre l'utilisation des informations d'identification (nom d'utilisateur, mot de passe, ou des biscuits, etc), lire sur.

---

Je crois que j'ai trouvé la réponse! (4 heures de travail et beaucoup de jurons plus tard)

//This does not work!!
Access-Control-Allow-Headers: *

Vous devez spécifier manuellement tous les en-têtes, vous allez accepter (à moins que c'était le cas pour moi en FF 4.0 & Chrome 10.0.648.204).

jQuery $.ajax méthode envoie le "x-requested-with-tête pour toutes les demandes de domaine (je pense que son seul domaine de la croix).

Ainsi, le manque d'en-tête nécessaires pour répondre à la demande d'OPTIONS est:

//no longer needed as of jquery 1.5.2
Access-Control-Allow-Headers: x-requested-with

Si vous êtes de passage non "simple" en-têtes, vous aurez besoin de les inclure dans votre liste (j'ai envoyer un de plus):

//only need part of this for my custom header
Access-Control-Allow-Headers: x-requested-with, x-requested-by

Afin de mettre tout cela ensemble, voici mon PHP:

// * wont work in FF w/ Allow-Credentials
//if you dont need Allow-Credentials, * seems to work
header('Access-Control-Allow-Origin: http://www.example.com');
//if you need cookies or login etc
header('Access-Control-Allow-Credentials: true');
if ($this->getRequestMethod() == 'OPTIONS')
{
  header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
  header('Access-Control-Max-Age: 604800');
  //if you need special headers
  header('Access-Control-Allow-Headers: x-requested-with');
  exit(0);
}

Answer 2

Une autre possibilité est que le paramètre dataType: json des causes de JQuery pour envoyer l' Content-Type: application/json - tête. Ceci est considéré comme une non-standard en-tête de la SCRO, et requiert l'un de la SCRO de contrôle en amont de la demande. Donc quelques petites choses à essayer:

1) Essayez de configurer votre serveur pour envoyer le bon contrôle en amont des réponses. Ce sera sous la forme d'en-têtes supplémentaires comme Access-Control-Allow-Methods et Access-Control-Allow-Headers.

2) la suppression de la dataType: json réglage. JQuery doit demande Content-Type: application/x-www-form-urlencoded par défaut, mais juste pour être sûr, vous pouvez remplacer dataType: json avec contentType: 'application/x-www-form-urlencoded'

Answer 3

Vous envoyez "params" en js: request.send(params);

mais "données" jquery". Des données est-elle définie?: data:data,

Aussi, vous avez une erreur dans l'URL:

$.ajax( {url:url,
         type:"POST",
         dataType:"json",
         data:data, 
         success:function(data, textStatus, jqXHR) {alert("success");},
         error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});

Vous êtes le mélange dans la syntaxe, l'un pour $.post

---

Mise à jour: j'ai été googler autour basé sur monsur réponse, et j'ai constaté que vous avez besoin d'ajouter Access-Control-Allow-Headers: Content-Type (ci-dessous le paragraphe complet)

http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/

Comment les Œuvres de la SCRO

La SCRO fonctionne de manière similaire à Flash crossdomain.fichier xml. Fondamentalement, l' le navigateur va envoyer un cross-domain demande à un service, le réglage de l'adresse HTTP l'en-tête de l'Origine de la demande serveur. Le service comprend un peu les en-têtes comme Access-Control-Allow-Origin pour indiquer si une telle demande est permis de.

Pour le BOSH gestionnaires de connexion, il suffit de spécifier que toutes les origines sont autorisés, par la mise en valeur de Access-Control-Allow-Origin: * d'. L' -Tête Content-Type doit également être la liste blanche dans le Access-Control-Allow-Headers-tête.

Enfin, pour certains types de les demandes, y compris BOSH connexion le gestionnaire de demandes, les autorisations vérifiez les pré-flighted. L' le navigateur va faire une demande d'OPTIONS et recevoir des en-têtes HTTP qui indiquent les origines sont permis, dont les méthodes sont autorisées, et combien de temps cette autorisation dernier. Par exemple, voici ce que l' Le pendjab et ejabberd patchs je n'ai de retour pour les OPTIONS:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type 
Access-Control-Max-Age: 86400

Answer 4

Le type de contenu doit être Content-Type: application / javascript

Si vous essayez http://terrasus.com/detail.jsp?articleID=396 article pas à pas, tout se passera bien.

si vous produisez une réponse jsonp, vous devriez obtenir la valeur de rappel et la définir de manière dynamique. Cet article a une explication de détail.