Междоменное XHR неудовлетворительную

Question

У меня есть API, размещенного на одного домена, что позволило CORS со следующими заголовками:

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

Я могу сделать GET или POST запрос из hackst.com и она отлично работает. Ссылка: http://hackst.com/#w3SbV

Из моего базового приложения, размещенного в другом домене, запросы GET работают нормально. Но когда я пытаюсь создать и сохранить новую модель (то есть сделать запрос POST), он не со следующей ошибкой:

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. 

Моим отношением магистрального код:

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

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

Я даже пытался сверх- верхом метод create и сделать запрос POST вручную, как это:

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

ту же ошибку.

Я попробовал автономный запрос GET на JSFiddle (http://jsfiddle.net/X9cqh/5/), но это не удается, хотя мое базовое приложение может сделать запрос GET прекрасным.

В настоящий момент я совершенно не знаю. Любые подсказки, указатели, решения?

Answer 1

Сервер должен также ответить на предполетной со следующим заголовком:

Access-Control-Allow-Headers: Content-Type 

Это необходимо, так как тип контента приложения/JSON, которая находится за пределами допустимых значений, определенных в спецификации CORS (HTTP: //www.w3.org/TR/cors/).

Answer 2

Работает установка вашего терминала. JSFiddle, по-видимому, не делает Аякс запросов, но вы можете быстро проверить, что он работает, введя эти четыре строки в Chrome консоль или Safari разработчик консоль:

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

Если вы попробуете это с доменом, который не разрешает CORS, он будет выходить из строя.

Answer 3

Причина, по которой добавление заголовка «Content-Type» приводит к сбою запроса CORS, вызвано неправильным настройкой вашего сервера.

Если клиент хочет указать определенные заголовки или использовать необычный глагол http-метода (например, PUT), браузер сначала выполнит вызов «preflight» OPTIONS, чтобы гарантировать, что ему разрешено устанавливать эти заголовки. Ваш сервер должен ответить на этот вызов OPTIONS с соответствующими заголовками. Вы увидите, что параметры вызывают на вкладке в сети инструменты разработчика Chrome или firebug, если вы хотите подтвердить, что это проблема.

Возможно, вас заинтересует мой более подробный ответ here.