Croce XHR dominio fallendo

Question

ho un'API ospitato su un dominio che ha CORS attivato con le seguenti intestazioni:

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

Sono in grado di fare una richiesta GET o POST da hackst.com e funziona benissimo. Collegamento: http://hackst.com/#w3SbV

Dalla mia app backbone ospitata su un altro dominio, le richieste GET funzionano correttamente. Ma quando cerco di creare e salvare un nuovo modello (vale a dire fare una richiesta POST), viene a mancare con il seguente errore:

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. 

Il mio codice dorsale rilevanti:

var newPostData = { 
    topic : "New Post", 
    body : "new body",   
    user_id : 1, 
}; 

var newPostModel = new Post(newPostData); 
this.model.create(newPostModel); 

Ho anche provato sovra- in sella il metodo create e fare una richiesta POST manualmente in questo modo:

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); 
     } 
    }); 
} 

stesso errore.

Ho provato una richiesta GET indipendente anche su JSFiddle (http://jsfiddle.net/X9cqh/5/), ma questo non funziona anche se la mia app backbone può rendere la richiesta GET valida.

Sono completamente all'oscuro a questo punto. Qualche suggerimento, puntatori, soluzioni?

Answer 1

Il server deve anche rispondere al preflight con la seguente intestazione:

Access-Control-Allow-Headers: Content-Type 

Ciò è necessario perché il tipo di contenuto è application/json, che è al di fuori dei valori accettabili definiti nelle specifiche CORS (http: //www.w3.org/TR/cors/).

Answer 2

L'installazione di sever funziona. JSFiddle a quanto pare non rende le richieste Ajax, ma è possibile verificare rapidamente che funziona inserendo queste quattro linee in console Chrome o Safari console sviluppatore:

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

Se si tenta questo con un dominio che non permette CORS, verrà fuori errore.

Answer 3

La ragione per cui l'aggiunta di un'intestazione "Content-Type" rende la richiesta CORS fallita è perché il server è configurato in modo errato.

Se il client desidera specificare intestazioni particolari o utilizzare un verbo di metodo http non in linea (ad esempio PUT), il browser eseguirà innanzitutto una chiamata OPZIONI di preflight per assicurarsi che sia consentito impostare tali intestazioni. Il tuo server deve rispondere a questa chiamata OPTIONS con le intestazioni appropriate. Vedrai che le opzioni richiamano nella scheda di rete degli strumenti per sviluppatori di Chrome o Firebug se vuoi confermare che questo è il problema.

La mia risposta più dettagliata è here.