2011-09-28 7 views
12

में CORS का उपयोग करके PUT/POST/HTTP कॉल को हटाने में असमर्थ, इसलिए, मैं CORS का उपयोग करके अपनी सेवा में सफलतापूर्वक एक GET कॉल कर सकता हूं। हालांकि, POST, PUT, और DELETE संचालन के लिए प्रीफलाइट स्तर पर कुछ गलत होना चाहिए। हालांकि, मैं जो कह सकता हूं, हेडर प्रतिक्रिया करता है कि मेरे सर्वर OPTIONS क्वेरी के जवाब में लौट रहे हैं, सही हैं औरJQuery 1.6.4

में वर्णित मिलान से मिलान करें JQuery 1.6.4 में $ .ajax का उपयोग करके मेरा जावास्क्रिप्ट कोड यहां है।

$.ajax({ 
    url: 'http://myhome:8080/TaskApproval/resources/tasks/2', 
    context: this, 
    data: '<?xml version="1.0" encoding="UTF-8"?> <task> <description>Get carrots from the grocery store</description><originator>Chris</originator><subject>Get Carrots !!</subject><taskId>2</taskId> </task> ', 
    timeout: 30000, 
    type: 'PUT', 
    contentType: 'application/xml', 
    success: function(response) { 
    alert(response); 
    result = response; 
    }, 
    error: function(xhr) { 
    alert('Error! Status = ' + xhr.status + " Message = " + xhr.statusText); 
    } 
}); 

अब, मेरा HTTP ट्रेल फ़ायरबग की सौजन्य जैसा दिखता है।

अनुरोध:

OPTIONS /TaskApproval/resources/tasks/2 HTTP/1.1 
Host: widgethome:8080 
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip, deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Origin: http://localhost:8080 
Access-Control-Request-Method: PUT 
Access-Control-Request-Headers: content-type 

प्रतिक्रिया:

HTTP/1.1 200 OK 
X-Powered-By: Servlet/3.0 
Server: GlassFish v3 
Allow: OPTIONS,GET,DELETE,HEAD,PUT, POST 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 
Access-Control-Max-Age: 1000 
Access-Control-Allow-Headers: * 
Content-Type: application/xml 
Content-Length: 2792 
Date: Wed, 28 Sep 2011 18:21:11 GMT 

वहाँ तो कोई डाल दिया जाता है (या पोस्ट या हटाना), मैं सिर्फ इतना है कि कष्टप्रद गैर उपयोगी XHR उद्देश्य यह है कि इस तरह दिखता है मिलती है:

readyState 0 
responseText "" 
status 0 
statusText "error" 

मुझे बहुत रहस्य है कि अगर मैं सामग्री को हटा देता हूं तो मेरे अजाक्स कॉल में टाइप करें, और यह एक अमान्य भेजता है मेरे आवेदन के अनुसार सामग्री प्रकार, ब्राउज़र वास्तव में मेरा पुट अनुरोध भेजता है, जो विफल रहता है क्योंकि सामग्री-प्रकार अनुप्रयोग/xml नहीं है। नीचे देखें:

विकल्प अनुरोध::

OPTIONS /TaskApproval/resources/tasks/2 HTTP/1.1 
Host: myhome:8080 
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip, deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Origin: http://localhost:8080 
Access-Control-Request-Method: PUT 

विकल्प प्रतिक्रिया:

HTTP/1.1 200 OK 
X-Powered-By: Servlet/3.0 
Server: GlassFish v3 
Allow: OPTIONS,GET,DELETE,HEAD,PUT, POST 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 
Access-Control-Max-Age: 1000 
Access-Control-Allow-Headers: * 
Content-Type: application/xml 
Content-Length: 2792 
Date: Wed, 28 Sep 2011 18:26:23 GMT 

रखें अनुरोध:

$.ajax({ 
    url: 'http://myhome:8080/TaskApproval/resources/tasks/2', 
    data: '<?xml version="1.0" encoding="UTF-8"?> <task> <description>Get carrots from the grocery store</description><originator>Chris</originator><subject>Get Carrots !!</subject><taskId>2</taskId> </task> ', 
    timeout: 30000, 
    type: 'PUT', 
    //contentType: 'application/xml', 
    success: function(response) { 
    alert(response); 
    result = response; 
    }, 
    error: function(xhr) { 
    alert('Error! Status = ' + xhr.status + " Message = " + xhr.statusText); 
    } 
}); 

Firebug के सौजन्य से यह HTTP ट्रेल ओर जाता है, फिर से

PUT /TaskApproval/resources/tasks/2 HTTP/1.1 
Host: myhome:8080 
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2 
Accept: */* 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip, deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Content-Type: application/x-www-form-urlencoded; charset=UTF-8 
Referer: http://localhost:8080/TaskApproval/crossdomain.html 
Content-Length: 197 
Origin: http://localhost:8080 

रखें प्रतिक्रिया:

HTTP/1.1 415 Unsupported Media Type 
X-Powered-By: Servlet/3.0 
Server: GlassFish v3 
Content-Type: text/html 
Content-Length: 1069 
Date: Wed, 28 Sep 2011 18:26:23 GMT 

415 क्योंकि मैं सामग्री आवेदन/x-www फार्म-urlencoded, केवल application/xml का समर्थन नहीं करते समझ में आता है। जो मुझे समझ में नहीं आता है वह सामग्री प्रकार को सही ढंग से पुट को क्यों रोकता है?

किसी भी अंतर्दृष्टि के लिए धन्यवाद! मैं काफी समय से इंटरनेट खोज रहा हूं, और इस समस्या का हल नहीं ढूंढ सकता।

उत्तर

30

आपको प्रीफलाइट और वास्तविक प्रतिक्रिया दोनों में सीओआरएस हेडर शामिल करने की आवश्यकता है।तो अपने सर्वर से PUT जवाब में निम्नलिखित हेडर का प्रयास करें:

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 
Access-Control-Allow-Headers: Content-Type 

नोट करने के लिए एक अन्य बात यह है कि CORS कल्पना पहुंच-नियंत्रण-अनुमति दें-हेडर के लिए मान्य मान के रूप में सूचीबद्ध नहीं करता है '*' है:

http://www.w3.org/TR/cors/#access-control-allow-headers-response-he

इसके बजाय, आप स्पष्ट रूप से ऐसा तरह सभी अनुरोध शीर्षों लिस्टिंग प्रयास करना चाहिए:

Access-Control-Allow-Headers: Content-Type 

आप सामग्री-Ty शामिल करना चाहिए pe क्योंकि सामग्री-प्रकार को एक सरल शीर्षलेख नहीं माना जाता है जब उसका मान एप्लिकेशन/x-www-form-urlencoded, multipart/form-data, या text/plain (सरल शीर्षलेखों पर अधिक जानकारी के लिए CORS spec देखें) नहीं है।

+0

@ monsur - जिसने इसे हल किया! धन्यवाद। मैंने सभी प्रतिक्रियाओं में शीर्षलेखों को शामिल करने का प्रयास किया, लेकिन त्रुटियां जारी रहीं - क्योंकि मुझे सामग्री-प्रकार पर प्रतिबंध नहीं समझा। सफाई देने के लिए धन्यवाद! – ChrisBean

-1

मत भूलना सुनिश्चित करें कि आपके prefight विकल्प अनुरोध भी साथ जवाब बनाने के लिए:

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 
Access-Control-Allow-Headers: Content-Type 
0

क्रोम एक्सटेंशन

इस सरल chrome extension(अनुमति दें नियंत्रण का उपयोग CORS अनुरोध करने के लिए, आप उपयोग कर सकते हैं उत्पत्ति की अनुमति दें)

यह आपको headers/config में कोई अतिरिक्त पैरामीटर जोड़ने के बिना CORS अनुरोध करने देगा।