Erreur: le champ d’en-tête de la requête Content-Type n’est pas autorisé par Access-Control-Allow-Headers

J’ai créé un projet API Web mvc4 en utilisant vS2012. J’ai utilisé le tutoriel suivant pour résoudre le partage de ressources inter-origines, “http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api- rc-version.aspx “. Il fonctionne correctement et je publie les données du côté client sur le serveur avec succès.

Après cela, pour implémenter Autherization dans mon projet, j’ai utilisé le tutoriel suivant pour implémenter OAuth2, “http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/18/oauth-2-0-for -mvc-deux-legged-implementation.aspx “. Cela m’aide à obtenir RequestToken du côté client.

Mais lorsque je publie des données du côté client, j’ai reçu l’erreur “XMLHttpRequest ne peut pas charger http: //. Le champ d’en-tête de requête Content-Type n’est pas autorisé par Access-Control-Allow-Headers.”

Mon code côté client ressemble,

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.ssortingngify(Emp), statusCode: { 200: function () { $("#txtmsg").val("done"); toastr.success('Success.', ''); } }, error: function (res) { toastr.error('Error.', 'sorry either your username of password was incorrect.'); } }); }; 

Mon contrôleur d’API ressemble à

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

Mon fichier webconfig ressemble,

    
<!---->

Comme le suggère cet article Erreur dans chrome: Content-Type n’est pas autorisé par Access-Control-Allow-Headers ajoutez simplement l’en-tête supplémentaire à votre fichier web.config comme ça …

       

Cela est probablement dû à une demande d’origine croisée , mais ce n’est peut-être pas le cas. Pour moi, j’avais débogué une API et défini Access-Control-Allow-Origin sur * , mais il semble que les versions récentes de Chrome nécessitent un en-tête supplémentaire. Essayez d’append ce qui suit à votre fichier si vous utilisez PHP:

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

Assurez-vous que vous n’avez pas encore utilisé d’en- header dans un autre fichier ou que vous obtenez une erreur grave. Voir les documents pour plus.

Je sais que c’est un vieux fil avec lequel j’ai travaillé avec la réponse ci-dessus et que j’ai dû append:

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

Donc, mon en-tête ressemble à:

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

Et le problème a été résolu.

Pour Nginx, la seule chose qui a fonctionné pour moi a été d’append cet en-tête:

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

Avec l’en-tête Access-Control-Allow-Origin:

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

Ensuite, nous avons rechargé la configuration nginx et cela a fonctionné très bien. Crédit https://gist.github.com/algal/5480916 .