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,

 <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

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

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