AngularJS: पोस्ट डाटा बाहरी बाकी एपीआई के

Question

मैं बहुत की तरह एक बुनियादी AngularJS सेवा सेटअप:

app.factory('User', function($resource) { 
return $resource('http://api.mysite.com/user/:action:id/:attr', {}, { 
    history: { 
     method: 'GET', 
     params: { 
      attr: 'history' 
     } 
    }, 
    update: { 
     method: 'POST', 
     params: { 
      name: 'test' 
     } 
    } 
}); 
}); 

और मैं इसे इस तरह का उपयोग करें:

User.history({id: 'testID'}, function(data) { 
    console.log('got history'); 
    console.log(data); 
}); 
User.update({id: 'me'}, function(data) { 
    console.log('updated'); 
    console.log(data); 
}); 

समस्या एक: User.update(), POST पर विधि सेट होने के बावजूद, अनुरोध विधि के रूप में विकल्प भेजना जारी रखता है।

हालांकि क्रोम देव उपकरण अनुरोध शीर्षलेख की रिपोर्ट करता है एक्सेस-कंट्रोल-अनुरोध-विधि: पोस्ट भी भेजा जाता है (सुनिश्चित नहीं है कि इसका मतलब कुछ भी है)।

समस्या दो: मैं CORS के साथ एक त्रुटि प्राप्त हो रही इन हेडर एपीआई कोड में सेट होने के बावजूद:

header('Access-Control-Allow-Origin: *'); 
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS"); 

इस समस्या को केवल हालांकि पता चलता है एक गैर प्राप्त अनुरोध करने वाले हैं।

इसे संभालने का उचित तरीका क्या है? मैंने जेएसओएनपी में भी देखा है, लेकिन यह एक अत्याधुनिक एपीआई है, मुझे यकीन नहीं है कि केवल जीईटी समर्थन के साथ समस्याओं को कैसे प्राप्त किया जाए।

Answer 1

आपकी दो समस्याएं वास्तव में एक समस्या है। विकल्प अनुरोध सीओआरएस प्रक्रिया का हिस्सा है। POST अनुरोधों के लिए, ब्राउज़र पहले एक विकल्प कॉल भेजता है, और सर्वर जवाब देता है कि इसे निष्पादित करना ठीक है या नहीं।

यदि विकल्प अनुरोध विफल रहता है, तो कोणीय/क्रोम आपको कंसोल में कारण दिखाता है। उदाहरण के लिए: CSRF को रोकने के लिए

header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token') 

एक्स xrsf-टोकन कोणीय के लिए है ':

OPTIONS https://*** Request header field Content-Type is not allowed by Access-Control-Allow-Headers. angular.min.js:106 

XMLHttpRequest cannot load https://***. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

आप शायद स्थापित करने के लिए शीर्ष लेख सर्वर पर भी पहुंच-नियंत्रण-अनुमति दें की है। क्लाइंट से जो भी आप भेजते हैं उसके आधार पर आपको अधिक शीर्षलेख जोड़ना पड़ सकता है।

यहाँ CORS पर एक बहुत अच्छा गाइड है: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

Answer 2

AngularJS काम कर CORS बनाने के लिए आप भी कोणीय httpProvider की डिफ़ॉल्ट सेटिंग्स को ओवरराइट करना:

var myApp = angular.module('myApp', [ 
    'myAppApiService']); 

myApp.config(['$httpProvider', function($httpProvider) { 
     $httpProvider.defaults.useXDomain = true; 
     delete $httpProvider.defaults.headers.common['X-Requested-With']; 
    } 
]); 

बस सही करने के लिए useXDomain की स्थापना काफी नहीं है। AJAX अनुरोध भी एक्स-अनुरोधित-शीर्षलेख के साथ भेजें, जो उन्हें AJAX के रूप में इंगित करता है। हेडर को हटाने के लिए आवश्यक है, इसलिए सर्वर आने वाले अनुरोध को अस्वीकार नहीं कर रहा है।

नोट: उत्तर केवल पुराने AngularJS संस्करण 1.2 के लिए पिछले के लिए काम करता है। 1.2 और बाद वाले वर्शन आपको कॉर्स को सक्षम करने के लिए कुछ भी करने की ज़रूरत नहीं है।

Answer 3

सर्वर पर इस समस्या को हल करने के लिए बेहतर है। अपाचे पर आप इसे .htaccess फ़ाइल में हल कर सकते हैं। यह कोणीय विकास के लिए दर्द का स्रोत है और इसे कोणीय में भी हल किया जा सकता है लेकिन संभवतः यह करने का सबसे अच्छा तरीका नहीं है।

Header set Access-Control-Allow-Origin "*" 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"