त्रुटि: हेडर फ़ील्ड सामग्री-प्रकार एक्सेस-कंट्रोल-अनुमति-हेडर्स द्वारा अनुमति नहीं है


102

मैंने vS2012 का उपयोग करके एक mvc4 वेब एपीआई परियोजना बनाई। मैंने क्रॉस-ओरिजिनल रिसोर्स शेयरिंग को हल करने के लिए निम्नलिखित ट्यूटोरियल का उपयोग किया, "http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api- rc-version.aspx "। यह सफलतापूर्वक काम कर रहा है, और मैं क्लाइंट की ओर से सर्वर से सफलतापूर्वक डेटा पोस्ट करता हूं।

उसके बाद अपने प्रोजेक्ट में ऑटेराइजेशन को लागू करने के लिए, मैंने OAuth2 को लागू करने के लिए निम्नलिखित ट्यूटोरियल का उपयोग किया, "http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/03/18/oauth-2-0-for -mvc-दो पैरों वाला-implementation.aspx "। यह क्लाइंट साइड पर RequestToken प्राप्त करने के लिए मेरी मदद करता है।

लेकिन जब मैं क्लाइंट की तरफ से डेटा पोस्ट करता हूं, तो मुझे यह त्रुटि मिली, "XMLHttpRequest http लोड नहीं कर सकता है। 1. हेडर फ़ील्ड की सामग्री-प्रकार एक्सेस-कंट्रोल-अनुमति-हेडर द्वारा अनुमति नहीं है।"

मेरा क्लाइंट साइड कोड जैसा दिखता है,

 function PostLogin() {
    var Emp = {};            
    Emp.UserName = $("#txtUserName").val();             
    var pass = $("#txtPassword").val();
    var hash = $.sha1(RequestToken + pass);
            $('#txtPassword').val(hash);
    Emp.Password= hash;
    Emp.RequestToken=RequestToken;
    var createurl = "http://localhost:54/api/Login";
    $.ajax({
        type: "POST",
        url: createurl,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(Emp),
        statusCode: {
                200: function () {
                $("#txtmsg").val("done");                       
                toastr.success('Success.', '');                         
                }
                },
        error:
            function (res) {                        
                toastr.error('Error.', 'sorry either your username of password was incorrect.');            
                }
        });
    };

मेरा एपीआई नियंत्रक जैसा दिखता है,

    [AllowAnonymous]
    [HttpPost]
    public LoginModelOAuth PostLogin([FromBody]LoginModelOAuth model)
    {
        var accessResponse = OAuthServiceBase.Instance.AccessToken(model.RequestToken, "User", model.Username, model.Password, model.RememberMe);

        if (!accessResponse.Success)
        {
            OAuthServiceBase.Instance.UnauthorizeToken(model.RequestToken);
            var requestResponse = OAuthServiceBase.Instance.RequestToken();

            model.ErrorMessage = "Invalid Credentials";

            return model;
        }
        else
        {
            // to do return accessResponse

            return model;
        }

    } 

मेरी webconfig फ़ाइल जैसी दिखती है,

 <configuration>
   <configSections>   
   <section name="entityFramework"    type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=4.4.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
  <section name="oauth" type="MillionNodes.Configuration.OAuthSection, MillionNodes, Version=1.0.0.0, Culture=neutral"/>
  <sectionGroup name="dotNetOpenAuth" type="DotNetOpenAuth.Configuration.DotNetOpenAuthSection, DotNetOpenAuth.Core">
  <section name="messaging" type="DotNetOpenAuth.Configuration.MessagingElement, DotNetOpenAuth.Core" requirePermission="false" allowLocation="true" />
  <section name="reporting" type="DotNetOpenAuth.Configuration.ReportingElement, DotNetOpenAuth.Core" requirePermission="false" allowLocation="true" />
</sectionGroup>
</configSections>
<oauth defaultProvider="DemoProvider" defaultService="DemoService">
<providers>
  <add name="DemoProvider" type="MillionNodes.OAuth.DemoProvider, MillionNodes" />
</providers>
<services>
  <add name="DemoService" type="MillionNodes.OAuth.DemoService, MillionNodes" />
</services>
</oauth>
<system.web>
 <httpModules>
   <add name="OAuthAuthentication" type="MillionNodes.Module.OAuthAuthenticationModule, MillionNodes, Version=1.0.0.0, Culture=neutral"/>
  </httpModules>
 <compilation debug="true" targetFramework="4.0" />
<authentication mode="Forms">
  <forms loginUrl="~/Account/Login" timeout="2880" />
</authentication>
<pages>
  <namespaces>
    <add namespace="System.Web.Helpers" />
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Optimization" />
    <add namespace="System.Web.Routing" />
    <add namespace="System.Web.WebPages" />
  </namespaces>
</pages>
</system.web>
<system.webServer>
 <validation validateIntegratedModeConfiguration="false" />      
  <modules>
      <add name="OAuthAuthentication"     type="MillionNodes.Module.OAuthAuthenticationModule, MillionNodes, Version=1.0.0.0, Culture=neutral" preCondition="" />
 </modules>
 <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
  </httpProtocol>
</system.webServer>
<dotNetOpenAuth>
<messaging>
  <untrustedWebRequest>
    <whitelistHosts>
      <!-- Uncomment to enable communication with localhost (should generally not activate in production!) -->
      <!--<add name="localhost" />-->
    </whitelistHosts>
  </untrustedWebRequest>
</messaging>
<!-- Allow DotNetOpenAuth to publish usage statistics to library authors to improve the library. -->
<reporting enabled="true" />


इस stackoverflow.com/questions/5027705/… पर एक नज़र डालें और अपने वेब कॉन्फ़िगर में एक और नियम जोड़ें
Mark जोन्स

नमस्ते क्या आप अपने ब्राउज़र और स्थानीय फ़ाइल सिस्टम जैसे फ़ाइल: // URL से सीधे इस js का परीक्षण कर रहे हैं। और किस ब्राउज़र से?
मार्क जोन्स

जवाबों:


170

जैसा कि इस पोस्ट द्वारा संकेत दिया गया है कि क्रोम में त्रुटि: कंटेंट-टाइप को एक्सेस-कंट्रोल-एक्सेप्ट-हेडर्स द्वारा अनुमति नहीं है, बस अतिरिक्त हेडर को अपने web.config में जोड़ें ...

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
  </customHeaders>
</httpProtocol>

जवाब के लिए धन्यवाद। इसने यह कोशिश की, लेकिन मुझे त्रुटि मिली, "XMLHttpRequest लोकलहोस्ट लोड नहीं कर सकता : 54 / एपीआई / लॉगिन । ऑरिजन-कंट्रोल-अलाउंस-ओरिजिन द्वारा मूल नल की अनुमति नहीं है।"
किशोर


मैं अभी भी इसके साथ कोई भाग्य नहीं कर रहा हूँ, मैंने यहाँ विस्तार से पोस्ट किया है: stackoverflow.com/questions/12437748/…
किशोर

112

क्रॉस-ऑरिजनल रिक्वेस्ट के कारण यह सबसे अधिक संभावना है , लेकिन यह नहीं हो सकता है। मेरे लिए, मैं एक एपीआई डीबग कर रहा था और करने के Access-Control-Allow-Originलिए सेट था *, लेकिन ऐसा लगता है कि क्रोम के हाल के संस्करणों को एक अतिरिक्त हेडर की आवश्यकता है। यदि आप PHP का उपयोग कर रहे हैं, तो अपनी फ़ाइल में निम्न को शामिल करने का प्रयास करें:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

सुनिश्चित करें कि आपने पहले headerसे किसी अन्य फ़ाइल में उपयोग नहीं किया है, या आपको एक गंदा त्रुटि मिलेगी। अधिक के लिए डॉक्स देखें ।


3
तारांकन कवर क्यों नहीं करता है सब कुछ - -;
user2483724

3
@ user2483724 ऐसा इसलिए है क्योंकि तारांकन किसी भी मूल डोमेन को अनुमति देता है, लेकिन यह निर्दिष्ट नहीं करता है कि कौन से अतिरिक्त हेडर की अनुमति है। यह सिर्फ कहता है, 'आप इस स्क्रिप्ट को कहीं और चलने वाले पेज से कॉल कर सकते हैं'
गार्ट क्लैबोर्न

18

मुझे पता है कि यह एक पुराना धागा है जिसे मैंने उपरोक्त उत्तर के साथ काम किया था और जोड़ना था:

header('Access-Control-Allow-Methods: GET, POST, PUT');

तो मेरा हैडर जैसा दिखता है:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');

और समस्या तय हो गई।


10

Nginx के लिए, केवल एक चीज जो मेरे लिए काम करती थी वह इस हेडर को जोड़ रही थी:

add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';

प्रवेश-नियंत्रण-अनुमति-मूल हेडर के साथ:

add_header 'Access-Control-Allow-Origin' '*';

फिर nginx कॉन्फिग को पुनः लोड किया और इसने बहुत अच्छा काम किया। क्रेडिट https://gist.github.com/algal/5480916

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.