L'échec du domaine Cross XHR

J'ai une API hébergée sur un domaine qui possède CORS activé avec les en-têtes suivants:

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Max-Age: 1728000

Je suis en mesure de faire une demande GET ou POST de hackst.com et ça marche bien. Lien: http://hackst.com/#w3SbV

À partir de mon application backbone hébergée sur un autre domaine, les demandes GET fonctionnent bien. Mais lorsque j'essaie de créer et d'enregistrer un nouveau modèle (c'est-à-dire faire une demande POST), il échoue avec l'erreur suivante:

 Failed to load resource: the server responded with a status of 501 (Not Implemented) http://projectwhatup.us:5000/api/posts XMLHttpRequest cannot load http://projectwhatup.us:5000/api/posts. Origin http://ayush.projectwhatup.us is not allowed by Access-Control-Allow-Origin.

Mon code backbone pertinent:

 var newPostData = { topic : "New Post", body : "new body", user_id : 1, }; var newPostModel = new Post(newPostData); this.model.create(newPostModel);

J'ai même essayé de minimiser la méthode de create et de faire une demande POST manuellement comme ceci:

 create : function(data) { console.log('overriden create'); $.ajax({ "url" : this.url, "async" : true, "beforeSend" : function(obj){ console.log(obj); }, "contentType" : 'application/json', //"crossDomain" : true, // uncommenting this doesnt help either "headers" : { }, "dataType" : 'json', "type" : 'POST', "data" : JSON.stringify(data), "error" : function(err){ console.log('new post creation failed'); console.log(err); }, "success" : function(resp){ console.log('new post created'); console.log(resp); } }); }

Même erreur.

J'ai également essayé une requête GET autonome sur JSFiddle (http://jsfiddle.net/X9cqh/5/), mais cela échoue même si mon application backbone peut rendre la requête GET bien.

Je suis complètement clueless à ce stade. Des conseils, des astuces, des solutions?

Le serveur doit également répondre au contre vol avec l'en-tête suivant:

 Access-Control-Allow-Headers: Content-Type

Ceci est nécessaire car le type de contenu est application / json, qui est en dehors des valeurs acceptables définies dans la spécification CORS (http://www.w3.org/TR/cors/).

Votre configuration de séparation fonctionne. JSFiddle apparemment ne fait pas les demandes d'ajax, mais vous pouvez rapidement tester qu'il fonctionne en entrant ces quatre lignes dans la console Chrome ou la console de développement Safari:

 var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://projectwhatup.us:5000/api/posts', false); xhr.send(); xhr.responseText;

Entrez la description de l'image ici

Si vous essayez ceci avec un domaine qui n'autorise pas le CORS, ce sera une erreur.

La raison pour laquelle l'ajout d'un en-tête «Content-Type» rend votre erreur de demande CORS est que votre serveur est configuré à tort.

Si le client souhaite spécifier des en-têtes particuliers ou utiliser un verbe de méthode HTTP inhabituel (p. Ex. PUT), le navigateur effectuera d'abord un appel OPTIONS «pré-vol» pour s'assurer qu'il est autorisé à configurer ces en-têtes. Votre serveur doit répondre à cet appel OPTIONS avec les en-têtes appropriés. Vous verrez ces options appeler dans l'onglet Réseau des outils développeurs Chrome ou Firebug si vous voulez confirmer que c'est le problème.

Vous pouvez être intéressé par ma réponse plus détaillée ici .