Asp.Net WebApi2 Activer CORS ne fonctionne pas avec AspNet.WebApi.Cors 5.2.3

J’ai essayé de suivre les étapes sur http://enable-cors.org/server_aspnet.html pour que mon API RESTful (implémentée avec ASP.NET WebAPI2) fonctionne avec des requêtes d’origine croisée (CORS Enabled). Cela ne fonctionne pas à moins que je modifie le web.config.

J’ai installé la dépendance WebApi Cors:

install-package Microsoft.AspNet.WebApi.Cors -ProjectName MyProject.Web.Api 

Ensuite, dans mon App_Start j’ai la classe WebApiConfig comme suit:

 public static class WebApiConfig { public static void Register(HttpConfiguration config) { var corsAttr = new EnableCorsAtsortingbute("*", "*", "*"); config.EnableCors(corsAttr); var constraintsResolver = new DefaultInlineConstraintResolver(); constraintsResolver.ConstraintMap.Add("apiVersionConstraint", typeof(ApiVersionConstraint)); config.MapHttpAtsortingbuteRoutes(constraintsResolver); config.Services.Replace(typeof(IHttpControllerSelector), new NamespaceHttpControllerSelector(config)); //config.EnableSystemDiagnosticsTracing(); config.Services.Replace(typeof(ITraceWriter), new SimpleTraceWriter(WebContainerManager.Get())); config.Services.Add(typeof(IExceptionLogger), new SimpleExceptionLogger(WebContainerManager.Get())); config.Services.Replace(typeof(IExceptionHandler), new GlobalExceptionHandler()); } } 

mais après que je lance l’application, je demande une ressource avec Fiddler comme: http: // localhost: 51589 / api / v1 / persons et dans la réponse je ne peux pas voir les en-têtes HTTP que je devrais voir tels que:

  • Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS
  • Access-Control-Allow-Origin: *

Est-ce que je manque une étape? J’ai essayé avec l’annotation suivante sur le contrôleur:

[EnableCors(origins: "http://example.com", headers: "*", methods: "*")]

Même résultat, pas de CORS activé.

Cependant, si j’ajoute les éléments suivants dans mon fichier web.config (sans même installer la dépendance AspNet.WebApi.Cors), cela fonctionne:

    <!--       -->    <!--       -->  

Toute aide serait très appréciée!

Je vous remercie.

J’ai créé un projet de démonstration épuré pour vous.

Vous pouvez essayer le lien API ci-dessus de votre Fiddler local pour voir les en-têtes. Voici une explication.

Global.ascx

Tout ce que fait est d’appeler le WebApiConfig . Ce n’est rien d’autre que l’organisation du code.

 public class WebApiApplication : System.Web.HttpApplication { protected void Application_Start() { WebApiConfig.Register(GlobalConfiguration.Configuration); } } 

WebApiConfig.cs

La méthode clé pour votre ici est la méthode EnableCrossSiteRequests . C’est tout ce que vous devez faire. EnableCorsAtsortingbute est un atsortingbut EnableCorsAtsortingbute scope mondiale .

 public static class WebApiConfig { public static void Register(HttpConfiguration config) { EnableCrossSiteRequests(config); AddRoutes(config); } private static void AddRoutes(HttpConfiguration config) { config.Routes.MapHttpRoute( name: "Default", routeTemplate: "api/{controller}/" ); } private static void EnableCrossSiteRequests(HttpConfiguration config) { var cors = new EnableCorsAtsortingbute( origins: "*", headers: "*", methods: "*"); config.EnableCors(cors); } } 

Contrôleur de valeurs

La méthode Get reçoit l’atsortingbut EnableCors que nous avons appliqué globalement. La méthode Another remplace les EnableCors globaux.

 public class ValuesController : ApiController { // GET api/values public IEnumerable Get() { return new ssortingng[] { "This is a CORS response.", "It works from any origin." }; } // GET api/values/another [HttpGet] [EnableCors(origins:"http://www.bigfont.ca", headers:"*", methods: "*")] public IEnumerable Another() { return new ssortingng[] { "This is a CORS response. ", "It works only from two origins: ", "1. www.bigfont.ca ", "2. the same origin." }; } } 

Web.config

Vous n’avez pas besoin d’append quelque chose de spécial dans web.config. En fait, voici à quoi ressemble le fichier web.config de la démo – il est vide.

    

Démo

 var url = "https://cors-webapi.azureewebsites.net/api/values" $.get(url, function(data) { console.log("We expect this to succeed."); console.log(data); }); var url = "https://cors-webapi.azureewebsites.net/api/values/another" $.get(url, function(data) { console.log(data); }).fail(function(xhr, status, text) { console.log("We expect this to fail."); console.log(status); }); 
  

Vous avez juste besoin de changer certains fichiers. Cela fonctionne pour moi.

Global.ascx

 public class WebApiApplication : System.Web.HttpApplication { protected void Application_Start() { WebApiConfig.Register(GlobalConfiguration.Configuration); } } 

WebApiConfig.cs

Toutes les demandes doivent appeler ce code.

 public static class WebApiConfig { public static void Register(HttpConfiguration config) { EnableCrossSiteRequests(config); AddRoutes(config); } private static void AddRoutes(HttpConfiguration config) { config.Routes.MapHttpRoute( name: "Default", routeTemplate: "api/{controller}/" ); } private static void EnableCrossSiteRequests(HttpConfiguration config) { var cors = new EnableCorsAtsortingbute( origins: "*", headers: "*", methods: "*"); config.EnableCors(cors); } } 

Un contrôleur

Rien à changer

Web.config

Vous devez append des gestionnaires dans votre fichier web.config

           

En cas de requête CORS, tous les navigateurs modernes répondent par un verbe OPTION, puis la requête proprement dite suit. Ceci est censé être utilisé pour demander à l’utilisateur une confirmation en cas de requête CORS. Mais dans le cas d’une API si vous souhaitez ignorer ce processus de vérification, ajoutez l’extrait suivant à Global.asax

  protected void Application_BeginRequest(object sender, EventArgs e) { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); if (HttpContext.Current.Request.HttpMethod == "OPTIONS") { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept"); HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000"); HttpContext.Current.Response.End(); } } 

Nous sums juste en passant le contrôle en vérifiant le verbe OPTIONS.

J’ai juste ajouté des en-têtes personnalisés au Web.config et cela a fonctionné comme un charme.

Sur la configuration – system.webServer:

       

J’ai l’application front-end et le backend sur la même solution. Pour que cela fonctionne, je dois définir le projet de services Web (Backend) par défaut pour que cela fonctionne.

J’utilisais ReST, je n’ai rien essayé d’autre.

Après quelques modifications dans mon Web.config, CORS a soudainement cessé de fonctionner dans mon projet Web API 2 (au moins pour la requête OPTIONS pendant le contrôle en amont). Il semble que vous ayez besoin de la section mentionnée ci-dessous dans votre fichier Web.config ou sinon, EnableCorsAtsortingbute (global) ne fonctionnera pas sur les requêtes OPTIONS. Notez que c’est exactement la même section que Visual Studio appenda dans un nouveau projet Web API 2.

         

Aucune de ces réponses ne fonctionne vraiment. Comme d’autres l’ont noté, le package Cors utilisera uniquement l’en-tête Access-Control-Allow-Origin si la requête avait un en-tête Origin. Mais vous ne pouvez généralement pas simplement append un en-tête Origin à la requête, car les navigateurs peuvent également essayer de régler cela.

Si vous voulez un moyen rapide et sale d’autoriser les requêtes intersites vers une API Web, il est beaucoup plus facile d’écrire un atsortingbut de filtre personnalisé:

 public class AllowCors : ActionFilterAtsortingbute { public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext) { if (actionExecutedContext == null) { throw new ArgumentNullException("actionExecutedContext"); } else { actionExecutedContext.Response.Headers.Remove("Access-Control-Allow-Origin"); actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*"); } base.OnActionExecuted(actionExecutedContext); } } 

Ensuite, utilisez-le simplement sur votre action Controller:

 [AllowCors] public IHttpActionResult Get() { return Ok("value"); } 

Je ne vous garantis pas la sécurité en général, mais c’est probablement beaucoup plus sûr que de définir les en-têtes dans le fichier web.config, car vous ne pourrez les appliquer que de la manière dont vous en avez besoin.

Et bien sûr, il est facile de modifier ce qui précède pour ne permettre que certaines origines, méthodes, etc.

WEBAPI2: SOLUTION. global.asax.cs:

 var cors = new EnableCorsAtsortingbute("*", "*", "*"); config.EnableCors(cors); 

Dans l’explorateur de solutions, cliquez avec le bouton droit sur api-project. Dans la fenêtre des propriétés, définissez «Authentification anonyme» sur Activé !!!

J’espère que cela aidera quelqu’un dans le futur.

Je viens de faire l’expérience de ce même problème, en essayant d’ activer globalement CORS . Cependant, j’ai découvert qu’il fonctionne, mais uniquement lorsque la demande contient une valeur d’en-tête d’ Origin . Si vous omettez la valeur d’en-tête d’ origin , la réponse ne contiendra pas d’ Access-Control-Allow-Origin .

J’ai utilisé un plugin chrome appelé DHC pour tester ma requête GET. Cela m’a permis d’append facilement l’en-tête Origin .

J’ai trouvé cette question car j’avais des problèmes avec la requête OPTIONS que la plupart des navigateurs envoyaient. Mon application routait les requêtes OPTIONS et utilisait mon IoC pour construire beaucoup d’objects et certaines envoyaient des exceptions sur ce type de requête étrange pour diverses raisons.

Fondamentalement, placez un itinéraire ignoré pour toutes les requêtes OPTIONS si elles vous posent des problèmes:

 var constraints = new { httpMethod = new HttpMethodConstraint(HttpMethod.Options) }; config.Routes.IgnoreRoute("OPTIONS", "{*pathInfo}", constraints); 

Plus d’infos: Arrêtez les requêtes OPTIONS de traitement de l’API Web

J’espère que cela aidera quelqu’un dans le futur. Mon problème était que je suivais le même tutoriel que l’OP pour activer le système CORS global. Cependant, j’ai également défini une règle CORS spécifique à l’action dans mon fichier AccountController.cs:

 [EnableCors(origins: "", headers: "*", methods: "*")] 

et recevait des erreurs sur l’origine ne peut pas être une chaîne vide ou vide. MAIS l’erreur s’est produite dans le fichier Global.asax.cs de tous les endroits. La solution est de la changer pour:

 [EnableCors(origins: "*", headers: "*", methods: "*")] 

remarquez le * dans les origines? Ce qui manquait était ce qui provoquait l’erreur dans le fichier Global.asax.cs.

J’espère que cela aide quelqu’un.