Comment activer CORS sur votre API Web

Les restrictions de sécurité sur la politique de sécurité de votre navigateur empêchent votre navigateur Web d'envoyer des requêtes AJAX à un serveur d'un autre domaine. Ceci est également connu sous le nom de politique de même origine. En d'autres termes, la sécurité intégrée du navigateur empêche une page Web d'un domaine d'exécuter des appels AJAX sur un autre domaine.

C'est là que CORS (Cross-Origin Resource Sharing) vient à la rescousse. CORS est une norme W3C qui vous permet de vous éloigner de la même politique d'origine adoptée par les navigateurs pour restreindre l'accès d'un domaine aux ressources appartenant à un autre domaine. Vous pouvez activer CORS pour votre API Web à l'aide du package d'API Web respectif (selon la version de l'API Web utilisée) ou du middleware OWIN.

Notez que l'origine d'une demande est composée d'un schéma, d'un hôte et d'un numéro de port. Ainsi, deux demandes sont considérées comme provenant de la même origine si elles ont le même schéma, l'hôte et le même numéro de port. Si l'un de ces éléments diffère, les demandes sont considérées comme d'origine croisée, c'est-à-dire n'appartenant pas à des origines identiques.

Activer la prise en charge CORS dans l'API Web ASP.NET

L'API Web ASP.NET fournit une excellente prise en charge de CORS. Pour prendre en charge CORS dans l'API Web ASP.NET 2, vous devez utiliser le package NuGet Microsoft.AspNet.WebApi.Cors. Pour installer ce package, vous pouvez exécuter la commande suivante à partir de la console du gestionnaire de packages NuGet.

Package d'installation Microsoft.AspNet.WebApi.Cors

Vous pouvez également sélectionner votre projet dans la fenêtre Explorateur de solutions et installer le package via le gestionnaire de packages NuGet.

Si vous utilisez Web API 1.0, vous pouvez activer la prise en charge CORS, y compris les instructions suivantes dans le gestionnaire d'événements Application_BeginRequest du fichier Global.asax.cs.

HttpContext.Current.Response.AddHeader ("Access-Control-Allow-Origin", allowedOrigin); 

HttpContext.Current.Response.AddHeader ("Access-Control-Allow-Methods", "GET, POST");

Notez que «allowedOrigin» est ici une variable de chaîne qui contient l'origine de la requête qui souhaite accéder à la ressource. 

La prise en charge de CORS peut être activée à trois niveaux. Ceux-ci comprennent les éléments suivants:

  • Niveau d'action
  • Niveau contrôleur
  • Niveau global

Activer CORS au niveau mondial

Pour activer CORS au niveau global, vous devez tirer parti de la méthode EnableCors de la classe HttpConfiguration comme indiqué dans l'extrait de code ci-dessous.

Registre public static void (configuration HttpConfiguration)

        {

            string origin = "// localhost: 50164 / WebClient /";

            EnableCorsAttribute cors = new EnableCorsAttribute (origine, "*", "GET, POST");

            config.EnableCors (cors);

            // Spécifiez ici la configuration et les services de l'API Web

            // Spécifiez les routes de l'API Web ici          

        }

    }

Reportez-vous à l'extrait de code ci-dessus. Notez comment l'origine de la demande a été spécifiée. Le paramètre * implique tous les en-têtes de requête. Ainsi, les demandes GET et POST du domaine spécifié seraient acceptées, toutes les autres demandes seraient rejetées.

Activer CORS au niveau du contrôleur

Vous pouvez également activer la prise en charge CORS au niveau du contrôleur. Pour ce faire, spécifiez l'attribut [EnableCors] à votre contrôleur API Web comme indiqué ci-dessous.

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

    public class AuthorsController: ApiController

    {  

        // Écrivez vos méthodes de contrôleur API Web ici

    }

Activer CORS au niveau de l'action

De même, vous pouvez également activer CORS au niveau de l'action à l'aide de l'attribut [EnableCORS]. Voici un exemple qui illustre comment cela est fait.

public class AuthorsController: ApiController

    {

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

        public IEnumerable Get ()

        {

            retourne une nouvelle chaîne [] {"Joydip Kanjilal", "Steve Smith"};

        }

    }

Désactiver CORS pour une action spécifique

Maintenant, vous devrez peut-être désactiver CORS pour une action spécifique ou un groupe d'actions. Cette fonctionnalité peut être utile lorsque vous avez déjà activé CORS au niveau global et que vous souhaitez maintenant le désactiver pour une ou plusieurs actions pour des raisons de sécurité. L'extrait de code suivant illustre comment vous pouvez y parvenir à l'aide de l'attribut [DisableCors].

[DisableCors ()]

public IEnumerable Get ()

   {

      retourne une nouvelle chaîne [] {"Joydip Kanjilal", "Steve Smith"};

   }

Si vous utilisez ASP.NET Core, vous devez ajouter le package Microsoft.AspNetCore.Cors via NuGet à votre projet, puis écrire l'instruction suivante dans le fichier Startup.cs pour configurer la prise en charge CORS.

public void ConfigureServices (services IServiceCollection)

{

    services.AddCors ();

}

Vous pouvez activer CORS à l'aide du middleware CORS - vous pouvez tirer parti de la méthode d'extension UseCors à cet égard. Vous pouvez également activer CORS au niveau du contrôleur ou des niveaux d'action à l'aide de l'attribut EnableCors de la même manière que nous l'avons fait plus tôt dans cet article. De même, pour désactiver CORS, vous pouvez utiliser l'attribut [DisableCors].