Error Request header field Content-Type is not allowed by Access-Control-Allow-Headers

Question

I created an mvc4 web api project using vS2012  I used following tutorial to solve the Cross-Origin Resource Sharing   http   blogs msdn com b carlosfigueira archive 2012 07 02 cors-support-in-asp-net-web-api-rc-version aspx   It is working successfully  and i post data  from client side to server successfully   After that for implementing Autherization in my project  I used the following tutorial to implement OAuth2   http   community codesmithtools com CodeSmith Community b tdupont archive 2011 03 18 oauth-2-0-for-mvc-two-legged-implementation aspx   This is help me for getting RequestToken on client side   But when i post data from client side  i got the error        XMLHttpRequest cannot load http     Request header field Content-Type is not allowed by Access-Control-Allow-Headers    My client side code look like    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                                                        My api controller look like        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                      My webconfig file look like     lt configuration gt      lt configSections gt         lt section name  entityFramework     type  System Data Entity Internal ConfigFile EntityFrameworkSection  EntityFramework  Version 4 4 0 0  Culture neutral  PublicKeyToken b77a5c561934e089  requirePermission  false    gt     lt section name  oauth  type  MillionNodes Configuration OAuthSection  MillionNodes  Version 1 0 0 0  Culture neutral   gt     lt sectionGroup name  dotNetOpenAuth  type  DotNetOpenAuth Configuration DotNetOpenAuthSection  DotNetOpenAuth Core  gt     lt section name  messaging  type  DotNetOpenAuth Configuration MessagingElement  DotNetOpenAuth Core  requirePermission  false  allowLocation  true    gt     lt section name  reporting  type  DotNetOpenAuth Configuration ReportingElement  DotNetOpenAuth Core  requirePermission  false  allowLocation  true    gt   lt  sectionGroup gt   lt  configSections gt   lt oauth defaultProvider  DemoProvider  defaultService  DemoService  gt   lt providers gt     lt add name  DemoProvider  type  MillionNodes OAuth DemoProvider  MillionNodes    gt   lt  providers gt   lt services gt     lt add name  DemoService  type  MillionNodes OAuth DemoService  MillionNodes    gt   lt  services gt   lt  oauth gt   lt system web gt    lt httpModules gt      lt add name  OAuthAuthentication  type  MillionNodes Module OAuthAuthenticationModule  MillionNodes  Version 1 0 0 0  Culture neutral   gt     lt  httpModules gt    lt compilation debug  true  targetFramework  4 0    gt   lt authentication mode  Forms  gt     lt forms loginUrl    Account Login  timeout  2880    gt   lt  authentication gt   lt pages gt     lt namespaces gt       lt add namespace  System Web Helpers    gt       lt add namespace  System Web Mvc    gt       lt add namespace  System Web Mvc Ajax    gt       lt add namespace  System Web Mvc Html    gt       lt add namespace  System Web Optimization    gt       lt add namespace  System Web Routing    gt       lt add namespace  System Web WebPages    gt     lt  namespaces gt   lt  pages gt   lt  system web gt   lt system webServer gt    lt validation validateIntegratedModeConfiguration  false    gt           lt modules gt         lt add name  OAuthAuthentication      type  MillionNodes Module OAuthAuthenticationModule  MillionNodes  Version 1 0 0 0  Culture neutral  preCondition      gt    lt  modules gt    lt httpProtocol gt     lt customHeaders gt       lt add name  Access-Control-Allow-Origin  value       gt       lt  customHeaders gt     lt  httpProtocol gt   lt  system webServer gt   lt dotNetOpenAuth gt   lt messaging gt     lt untrustedWebRequest gt       lt whitelistHosts gt         lt  -- Uncomment to enable communication with localhost  should generally not activate in production   -- gt         lt  -- lt add name  localhost    gt -- gt       lt  whitelistHosts gt     lt  untrustedWebRequest gt   lt  messaging gt   lt  -- Allow DotNetOpenAuth to publish usage statistics to library authors to improve the library  -- gt   lt reporting enabled  true    gt

User · Answer

It is most likely due to a cross-origin request  but it may not be   For me  I had been debugging an API and had set the Access-Control-Allow-Origin to    but it appears that recent versions of Chrome are requiring an extra header   Try prepending the following to your file if you are using PHP   header  Access-Control-Allow-Origin       header  Access-Control-Allow-Headers  Origin  X-Requested-With  Content-Type  Accept      Make sure that you haven t already used header in another file  or you will get a nasty error   See the docs for more

User · Answer

As hinted at by this post Error in chrome  Content-Type is not allowed by Access-Control-Allow-Headers just add the additional header to your web config like so         lt httpProtocol gt     lt customHeaders gt       lt add name  Access-Control-Allow-Origin  value       gt       lt add name  Access-Control-Allow-Headers  value  Origin  X-Requested-With  Content-Type  Accept    gt     lt  customHeaders gt   lt  httpProtocol gt

User · Answer

Had the same problem  while differently from other answers in my case I use ASP NET to develop the WebAPI server  I already had Corps allowed and it worked for GET requests  To make POST requests work I needed to add  AllowAnyHeader    and  AllowAnyMethod    options to the list of Corp options  Here are essential parts of related functions in Start class look like  ConfigureServices method      services AddCors options   gt                options AddPolicy name  MyAllowSpecificOrigins                            builder   gt                                                            builder                                    WithOrigins  quot http   localhost 4200 quot                                      AllowAnyHeader                                      AllowAnyMethod                                        AllowCredentials                                                                              Configure method          app UseCors MyAllowSpecificOrigins    Found this from   https   docs microsoft com en-us aspnet core security cors view aspnetcore-3 1 https   forums asp net t 2168883 aspx Request header field content type is not allowed by Access Control Allow Headers in preflight response

User · Answer

For Nginx  the only thing that worked for me was adding this header   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     Along with the Access-Control-Allow-Origin header   add header  Access-Control-Allow-Origin         Then reloaded the nginx config and it worked great  Credit https   gist github com algal 5480916

User · Answer

I know it s an old thread I worked with above answer and had to add   header  Access-Control-Allow-Methods  GET  POST  PUT      So my header looks like   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      And the problem was fixed

[jquery] Error :Request header field Content-Type is not allowed by Access-Control-Allow-Headers

Examples related to jquery

Examples related to asp.net-mvc-4

Examples related to asp.net-web-api

Examples related to oauth-2.0

Examples related to cors