Erro: o campo de header de solicitação Content-Type não é permitido pelo Access-Control-Allow-Headers

Eu criei um projeto de mvc4 web api usando vS2012. Eu usei o seguinte tutorial para resolver o compartilhamento de resources entre origens, “http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api- rc-version.aspx “. Ele está funcionando com êxito e eu postei dados do lado do cliente para o servidor com êxito.

Depois disso, para implementar o Autherization no meu projeto, usei o seguinte tutorial para implementar o OAuth2, “http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/18/oauth-2-0-for -mvc-two-legged-implementation.aspx “. Isso me ajuda a obter RequestToken no lado do cliente.

Mas quando eu postar dados do lado do cliente, eu tenho o erro , XMLHttpRequest não pode carregar http: //. Campo de header de solicitação Content-Type não é permitido pelo Access-Control-Allow-Headers.”

Meu código do lado do cliente se parece com

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

Meu controlador de API parece

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

Meu arquivo webconfig parece

    
<!---->

Como sugerido por este post Erro no chrome: Content-Type não é permitido pelo Access-Control-Allow-Headers basta adicionar o header adicional ao seu web.config como assim …

       

É mais provável que seja devido a uma solicitação de origem cruzada , mas pode não ser. Para mim, eu estava depurando uma API e defini o Access-Control-Allow-Origin como * , mas parece que versões recentes do Chrome exigem um header extra. Tente colocar o seguinte no seu arquivo, se você estiver usando o PHP:

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

Certifique-se de que você não tenha usado o header em outro arquivo ou receberá um erro desagradável. Veja os documentos para mais.

Eu sei que é um thread antigo que eu trabalhei com resposta acima e tive que adicionar:

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

Então meu header parece:

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

E o problema foi corrigido.

Para o Nginx, a única coisa que funcionou para mim foi adicionar este 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'; 

Juntamente com o header Access-Control-Allow-Origin:

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

Em seguida, recarregou a configuração do nginx e funcionou muito bem. Crédito https://gist.github.com/algal/5480916 .