क्रॉस डोमेन एक्सएचआर

Question

मैं एक API एक डोमेन है कि CORS निम्न हेडर के साथ सक्षम पर होस्ट की गई असफल:

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

मैं hackst.com से किसी GET या पोस्ट अनुरोध बनाने के लिए कर रहा हूँ और यह ठीक काम करता है। लिंक: http://hackst.com/#w3SbV

किसी अन्य डोमेन पर होस्ट किए गए मेरे रीढ़ की हड्डी ऐप से, GET अनुरोध ठीक काम करते हैं। लेकिन जब मैं बना सकते हैं और एक नए मॉडल को बचाने के लिए (यानी एक पोस्ट अनुरोध बनाने) की कोशिश है, यह निम्न त्रुटि के साथ विफल:

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 विधि की सवारी और इस तरह मैन्युअल रूप से एक पोस्ट अनुरोध बनाने:

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

एक ही त्रुटि।

मैंने JSFiddle पर एक अकेले जीईटी अनुरोध की कोशिश की (http://jsfiddle.net/X9cqh/5/), लेकिन यह विफल रहता है भले ही मेरा रीढ़ की हड्डी ऐप जीईटी अनुरोध को ठीक कर सके।

मैं इस बिंदु पर पूरी तरह से अनजान हूं। कोई संकेत, पॉइंटर्स, समाधान?

Answer 1

सर्वर भी निम्न हेडर के साथ preflight का उत्तर देना होगा:

Access-Control-Allow-Headers: Content-Type 

क्योंकि सामग्री प्रकार आवेदन/json, जो CORS कल्पना में परिभाषित स्वीकार्य मानों के बाहर है (http है यह आवश्यक है: //www.w3.org/TR/cors/)।

Answer 2

आपका सेवर सेटअप काम करता है। JSFiddle जाहिरा तौर पर ajax अनुरोध करने नहीं है, लेकिन आप जल्दी से परीक्षण कर सकते हैं कि यह क्रोम कंसोल या सफारी डेवलपर कंसोल में इन चार पंक्तियों में प्रवेश करने से काम करता है:

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

आप एक डोमेन के साथ इस प्रयास करें कि सीओआरएस की अनुमति नहीं देता है, यह त्रुटि होगी।

Answer 3

'सामग्री-प्रकार' शीर्षलेख जोड़ने का कारण आपके CORS अनुरोध विफल हो गया है क्योंकि आपका सर्वर गलत तरीके से स्थापित है।

यदि ग्राहक विशेष शीर्षलेख निर्दिष्ट करना चाहते हैं या असामान्य http विधि क्रिया (उदा। PUT) का उपयोग करना चाहते हैं, तो ब्राउज़र पहले यह सुनिश्चित करने के लिए 'प्रीफलाइट' विकल्प कॉल करेगा कि यह उन शीर्षकों को सेट करने की अनुमति है। आपके सर्वर को उपयुक्त हेडर के साथ इस विकल्प कॉल का जवाब देना होगा। आप देखेंगे कि Chrome डेवलपर टूल या फ़ायरबग के नेटवर्क टैब में विकल्प कॉल करते हैं, यदि आप यह पुष्टि करना चाहते हैं कि समस्या यही है।

आपको मेरे अधिक विस्तृत उत्तर here में रुचि हो सकती है।