Error: el campo de encabezado de solicitud Content-Type no está permitido por Access-Control-Allow-Headers

Creé un proyecto de API web mvc4 usando vS2012. Utilicé el siguiente tutorial para resolver el Intercambio de recursos de origen cruzado, “http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api- rc-version.aspx “. Está funcionando correctamente y publico datos del lado del cliente al servidor con éxito.

Después de eso para implementar Autherization en mi proyecto, utilicé el siguiente tutorial para implementar OAuth2, “http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/18/oauth-2-0-for -mvc-two-legged-implementation.aspx “. Esto me ayuda a obtener RequestToken en el lado del cliente.

Pero cuando publico datos del lado del cliente, recibo el error “XMLHttpRequest no puede cargar http: //. El campo de encabezado de solicitud Content-Type no está permitido por Access-Control-Allow-Headers”.

Mi código del lado del cliente parece,

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

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

Mi archivo webconfig parece,

    
<!---->

Como se insinuó en este mensaje Error en chrome: Content-Type no está permitido por Access-Control-Allow-Headers simplemente agrega el encabezado adicional a tu web.config como tal …

       

Lo más probable es que se deba a una solicitud de origen cruzado , pero puede no serlo. Para mí, he estado depurando una API y había establecido Access-Control-Allow-Origin en * , pero parece que las versiones recientes de Chrome requieren un encabezado adicional. Pruebe anteponiendo lo siguiente a su archivo si está usando PHP:

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

Asegúrate de no haber usado el header en otro archivo, o recibirás un desagradable error. Ver los documentos para más.

Sé que es un hilo viejo con el que trabajé anteriormente y tuve que agregar:

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

Entonces mi encabezado se ve así:

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

Y el problema fue solucionado.

Para Nginx, lo único que funcionó para mí fue agregar este encabezado:

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

Junto con el encabezado Access-Control-Allow-Origin:

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

Luego recargué la configuración nginx y funcionó muy bien. Crédito https://gist.github.com/algal/5480916 .