Hata: Content-Type istek başlık alanına Access-Control-Allow-Headers tarafından izin verilmiyor

102

VS2012 kullanarak bir mvc4 web api projesi oluşturdum. Kökenler Arası Kaynak Paylaşımı'nı çözmek için aşağıdaki öğreticiyi kullandım, "http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api- rc-version.aspx ". Başarıyla çalışıyor ve verileri istemci tarafından sunucuya başarıyla gönderiyorum.

Bundan sonra, projemde Otomatikleştirmeyi uygulamak için, OAuth2'yi uygulamak için aşağıdaki öğreticiyi kullandım, "http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/18/oauth-2-0-for -mvc-iki ayaklı-uygulama.aspx ". Bu, istemci tarafında RequestToken almak için bana yardımcı olur.

Ancak istemci tarafından veri gönderdiğimde, "XMLHttpRequest http: // yükleyemiyor. Access-Control-Allow-Headers, Content-Type istek başlık alanına izin vermiyor." Hatasını aldım .

Benim istemci tarafı kod bakmak gibi

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

Benim api denetleyici bakmak gibi

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

    }

Benim WebConfig dosya bakmak gibi

 <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" />

jquery  asp.net-mvc-4  asp.net-web-api  oauth-2.0  cors 
— Kishore
kaynak
Bu stackoverflow.com/questions/5027705/… 'e bir göz atın ve web yapılandırmanıza başka bir kural ekleyin
— Mark Jones
Merhaba, bu js'yi doğrudan tarayıcınızdan ve yerel dosya sisteminizden test ediyor musunuz, örn. File: // URL. ?? Ve hangi tarayıcıdan?
— Mark Jones

Yanıtlar:

170

Bu gönderide de belirtildiği gibi Chrome'da Hata: Content-Type'a Access-Control-Allow-Headers tarafından izin verilmiyor, sadece ek başlığı web.config'inize ekleyin ... 

<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>
— Mark Jones
kaynak
Cevap için teşekkürler. Bunu denedi ama "XMLHttpRequest localhost'u yükleyemiyor : 54 / api / Login . Access-Control-Allow-Origin tarafından kaynak null değerine izin verilmiyor."
— Kishore
— Mark Jones
Bu konuda hala şansım yok, burada ayrıntılı olarak yayınladım: stackoverflow.com/questions/12437748/…
— Kishore
113

Büyük olasılıkla çapraz kaynaklı bir talepten kaynaklanmaktadır , ancak olmayabilir. Benim için, ben bir API hata ayıklama olmuştu ve batmıştı Access-Control-Allow-Originiçin *, ancak Chrome son sürümleri ekstra başlık gerektiren anlaşılıyor. PHP kullanıyorsanız, aşağıdakileri dosyanıza önceden eklemeyi deneyin:

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

Henüz headerbaşka bir dosyada kullanmadığınızdan emin olun , aksi takdirde kötü bir hata alırsınız. Daha fazlası için belgelere bakın .

— user1429980
kaynak
3
Yıldız işareti neden her şeyi kapsamıyor - -;
— user2483724
3
@ user2483724 bunun nedeni yıldız işaretinin herhangi bir Origin etki alanına izin vermesidir, ancak hangi ek başlıklara izin verildiğini belirtmez. Sadece 'bu komut dosyasını başka bir yerde çalışan bir sayfadan arayabilirsin' diyor
— Garet Claborn
18

Yukarıdaki cevapla çalıştığım ve eklemem gereken eski bir konu olduğunu biliyorum:

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

Yani başlığım şöyle görünüyor:

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

Ve sorun çözüldü.

— Danny 22
kaynak
10

Nginx için benim için çalışan tek şey şu başlığı eklemekti:

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';

Access-Control-Allow-Origin başlığıyla birlikte:

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

Sonra nginx yapılandırmasını yeniden yükledi ve harika çalıştı. Kredi https://gist.github.com/algal/5480916 .

— Nick Woodhams
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.