Błąd: Pole nagłówka żądania Content-Type nie jest dozwolony przez Access-Control-Allow-Headers

Question

Utworzono projekt aplikacji webowej mvc4 za pomocą vS2012. Skorzystałem z poniższego samouczka, aby rozwiązać problem dzielenia się zasobami krzyżowymi, "http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api- rc-version.aspx ". Działa on pomyślnie i pomyślnie publikuje dane od strony klienta do serwera.

Po wykonaniu projektu Autherization w moim projekcie skorzystałem z poniższego samouczka, aby zaimplementować OAuth2, "http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/18/oauth-2 -0-for-mvc-two-legged-implementation.aspx ". Pomaga mi to uzyskać RequestToken po stronie klienta.

Ale kiedy dodawać dane ze strony klienta, mam ten błąd, „XMLHttpRequest nie może załadować http:. // Zapytanie pole nagłówka Content-Type nie jest dozwolone przez Access-Control-allow-nagłówków.”

Moja stronie klienta kod wyglądać,

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

Mój kontroler api wyglądać,

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

    } 

Moja webconfig plik wyglądać,

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

Answer 1

Jak wskazywały na to stanowisko przez Error in chrome: Content-Type is not allowed by Access-Control-Allow-Headers wystarczy dodać dodatkowy nagłówek do web.config jak tak ...

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

Answer 2

Jest to najprawdopodobniej ze względu na prośbę przekroju pochodzenia , ale może nie być. Dla mnie debugowałem API i ustawiłem Access-Control-Allow-Origin na *, ale wydaje się, że ostatnie wersje Chrome wymagają dodatkowego nagłówka. Spróbuj poprzedzenie następujące do pliku, jeśli używasz PHP:

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

Upewnij się, że nie zostały jeszcze wykorzystane header w innym pliku, albo dostaniesz paskudny błąd. Aby uzyskać więcej informacji, patrz the docs.

Answer 3

Wiem, że to stary wątek Pracowałem z powyższym odpowiedź i miał dodać:

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

Więc mój nagłówek wygląda tak:

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

i problem został rozwiązany.

Answer 4

Dla Nginx, jedyną rzeczą, która pracowała dla mnie było dodanie tego nagłówka:

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

Wraz z nagłówkiem Access-Control-Allow-Origin:

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

Następnie przeładował config nginx i działało świetnie. Kredyt https://gist.github.com/algal/5480916.

Answer 5

Używam CodeIgniter z kątowym 4 i miałem taki problem ...

dodałem poniższe linie:

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

i rozwiązywane ...