2012-08-02 21 views
11

मेरी मोबाइल ऐप विकास सीखने की प्रक्रिया के साथ आगे बढ़ते हुए, मुझे एक नई बाधा मिली है: क्रॉस-मूल अनुरोध साझाकरण या सीओआरएस।कोणीय जेएस + एएसपी.नेट वेब एपीआई क्रॉस-डोमेन अंक

मैं एंगुलरजेएस + jQuery मोबाइल (कॉर्डोवा फोन क्लाइंट) और एएसपी.नेट वेब एपीआई (बैकएंड) के संयोजन का उपयोग कर रहा हूं। मेरी समस्या यह है कि मैं एक एपीआई नियंत्रक को एक POST अनुरोध (या किसी अन्य प्रकार का अनुरोध) पूरा करने में सक्षम नहीं हूं।

मेरा कोणीय जेएस नियंत्रक वेब एपीआई नियंत्रक को कॉल करने के लिए $http.post() सेवा विधि का उपयोग करता है। हालांकि, क्रोम डीबगर का कहना है कि कॉल एक विकल्प अनुरोध (संभवतः सीओआरएस प्रीफलाइट अनुरोध) में विफल रहा।

मैंने निम्नलिखित पोस्ट से सीओआरएस एक्शन चयनकर्ता लागू किया है: Enabling CORS in Web API Project। यहां तक ​​कि कठिन मैं फिडलर से एपीआई विधि को कॉल कर सकता हूं, एंगुलरजेएस विकल्प प्रीफलाइट अनुरोध पर असफल रहता है।

क्या मुझे कुछ भी है जो मुझे AngularJS और क्रॉस-डोमेन कॉल के बारे में पता होना चाहिए? मेरे परिस्थिति के लिए कोई भी संभावित समाधान?

धन्यवाद।

+0

[एक और कोणीय प्रश्न फिर से: विकल्प] (http://stackoverflow.com/questions/12111936/angularjs-performs-an-options-http-request-for-a-cross-origin-resource) – johlrich

उत्तर

0

उन (nugettable) के साथ Thinktecture Cors ऑब्जेक्ट्स देखें, आप WebApi में अपने स्वयं के कोड के बिना पूर्ण कॉरस समर्थन प्राप्त कर सकते हैं।

एक सही सीओआरएस कार्यान्वयन के साथ भी मुझे आईआईएस 7 के साथ वास्तव में एक अजीब समस्या है जिसे वेबडाव के लिए सभी क्रियाओं को सक्षम करके हल किया गया था (हाँ, वेबडाव - मुझसे मत पूछें कि मैंने ब्लॉग पोस्ट पर निर्देशों का पालन क्यों किया: डी)।

यह करें:

  • ओपन आईआईएस प्रबंधक, आपके आवेदन के हैंडलर मैपिंग में जाते हैं।
  • डबल WebDav हैंडलर,
  • पर क्लिक करें "अनुरोध प्रतिबंध"
  • क्लिक करें "क्रिया" टैब पर चुनें "सभी क्रियाएं"।

फिर से, कोई विचार WebAPI WebDav क्यों उपयोग करता है, लेकिन इस पोस्ट के साथ समस्याओं को हल किया और DELETE कि एक सही CORS कार्यान्वयन के बावजूद काम नहीं होगा।

10

आप सामग्री-प्रकार का उपयोग करके प्रीफलाइट विकल्प अनुरोध को छोड़ सकते हैं: एप्लिकेशन/एक्स-www-form-urlencoded।

AngularJS:

var user = { 
    ID: 1, 
    Name: 'test' 
}; 

$http({ 
    url: "api.localhost/api/users/addUser", 
    method: "POST", 
    data: $.param(user), 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    withCredentials: true, 
    }).success(function (data, status, headers, config) { 
    console.log(data); 
}) 

वेब एपीआई:

[HttpPost] 
public string AddUser(User user) 
{ 
    // Do something 
    return user.Name + " added"; 
} 

Web.config

<system.webServer> 
     <validation validateIntegratedModeConfiguration="false" /> 
      <handlers> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
       <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
       <remove name="OPTIONSVerbHandler" /> 
       <remove name="TRACEVerbHandler" /> 

       <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
      </handlers> 
      <httpProtocol> 
       <customHeaders> 
        <add name="Access-Control-Allow-Origin" value="http://localhost" /> 
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" /> 
        <add name="Access-Control-Allow-Credentials" value="true" /> 
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
       </customHeaders> 
      </httpProtocol> 
     </system.webServer> 
+0

यह काम करता है Microsoft.AspNet.WebApi.Cors और web.config हिस्सा बिना – Samuel

3

इस iss पर ठोकर जबकि माइक्रोसॉफ्ट वेब एपीआई 2 के साथ AngularJS 1.3 के साथ मुझे सीओआरएस कॉन्फ़िगरेशन समस्या का एक आसान समाधान मिला।

  • Nuget इंस्टॉल से पहले - माइक्रोसॉफ्ट WebAPI Cors

    Install-Package Microsoft.AspNet.WebApi.Cors 
    
  • फिर अपने WebApiConfig.cs फ़ाइल में

    :

    var cors = new System.Web.Http.Cors.EnableCorsAttribute("www.my-angular-web-site.com", "*", "*"); 
    
    config.EnableCors(cors); 
    

तुम भी एक साथ हर जगह CORS सक्षम कर सकते हैं * आपकी वेबसाइट के बजाय, लेकिन यह सीओआरएस के उद्देश्य को हरा देता है और सुरक्षा छेद खोलता है - लेकिन आप इसे परीक्षण के लिए कर सकते हैं।

WebApi.Cors असेंबली आपको नियंत्रक द्वारा या अन्य और दानेदार विवरणों के साथ कॉर्स नियंत्रक को सक्षम करने देता है। अन्य विवरण वेब एपीआई साइट पर here मिल सकते हैं।

+1

config.EnableCors(); config.EnableCors (CORS) होना चाहिए; – user3484993

+0

@ user3484993 धन्यवाद मैंने जवाब अपडेट किया। – kmcnamee

+0

ओह धन्यवाद सर यह मेरी समस्या हल है। –

संबंधित मुद्दे