Tutoriel : Héberger une API RESTful avec CORS dans Azure App ServiceTutorial: Host a RESTful API with CORS in Azure App Service

Azure App Service offre un service d’hébergement web hautement évolutif appliquant des mises à jour correctives automatiques.Azure App Service provides a highly scalable, self-patching web hosting service. De plus, App Service intègre la prise en charge du partage des ressources cross-origin (CORS) pour les API RESTful.In addition, App Service has built-in support for Cross-Origin Resource Sharing (CORS) for RESTful APIs. Ce didacticiel montre comment déployer une application ASP.NET Core API sur App Service avec prise en charge CORS.This tutorial shows how to deploy an ASP.NET Core API app to App Service with CORS support. Vous configurez l’application à l’aide d’outils en ligne de commande, et vous la déployez à l’aide de Git.You configure the app using command-line tools and deploy the app using Git.

Ce tutoriel vous montre comment effectuer les opérations suivantes :In this tutorial, you learn how to:

  • Créer des ressources App Service à l’aide d’Azure CLICreate App Service resources using Azure CLI
  • Déployer une API RESTful sur Azure à l’aide de GitDeploy a RESTful API to Azure using Git
  • Activer la prise en charge de CORS sur App ServiceEnable App Service CORS support

Vous pouvez suivre les étapes de ce didacticiel sur macOS, Linux, Windows.You can follow the steps in this tutorial on macOS, Linux, Windows.

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.If you don't have an Azure subscription, create a free account before you begin.

PrérequisPrerequisites

Pour suivre ce tutoriel :To complete this tutorial:

Créer l’application ASP.NET Core localeCreate local ASP.NET Core app

Cette étape consiste à configurer le projet ASP.NET Core local.In this step, you set up the local ASP.NET Core project. App Service prend en charge le même flux de travail pour les API écrites dans d’autres langages.App Service supports the same workflow for APIs written in other languages.

Clonage de l’exemple d’applicationClone the sample application

Dans la fenêtre de terminal, cd vers un répertoire de travail.In the terminal window, cd to a working directory.

Exécutez la commande suivante pour cloner l’exemple de référentiel :Run the following command to clone the sample repository.

git clone https://github.com/Azure-Samples/dotnet-core-api

Ce référentiel contient une application créée en fonction du didacticiel suivant : Pages d’aide d’API web ASP.NET Core avec Swagger/OpenAPI.This repository contains an app that's created based on the following tutorial: ASP.NET Core Web API help pages using Swagger. Elle utilise un générateur de Swagger pour traiter l’interface utilisateur Swagger et le point de terminaison JSON de Swagger.It uses a Swagger generator to serve the Swagger UI and the Swagger JSON endpoint.

Exécution de l'applicationRun the application

Exécutez la commande suivante pour installer les packages requis, migrer les bases de données et démarrer l’application.Run the following commands to install the required packages, run database migrations, and start the application.

cd dotnet-core-api
dotnet restore
dotnet run

Accédez à http://localhost:5000/swagger dans un navigateur pour vous familiariser avec l’interface utilisateur Swagger.Navigate to http://localhost:5000/swagger in a browser to play with the Swagger UI.

API ASP.NET Core exécuté en local

Accédez à http://localhost:5000/api/todo pour visualiser une liste des tâches JSON.Navigate to http://localhost:5000/api/todo and see a list of ToDo JSON items.

Accédez à http://localhost:5000 et familiarisez-vous avec l’application de navigateur.Navigate to http://localhost:5000 and play with the browser app. Ensuite, vous allez pointer l’application de navigateur vers une API distante dans l’App Service pour tester la fonctionnalité CORS.Later, you will point the browser app to a remote API in App Service to test CORS functionality. Le code pour l’application de navigateur se trouve dans le répertoire wwwroot du référentiel.Code for the browser app is found in the repository's wwwroot directory.

Pour arrêter ASP.NET Core à tout moment, appuyez sur Ctrl+C dans le terminal.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Ouvrir Azure Cloud ShellOpen Azure Cloud Shell

Azure Cloud Shell est un environnement d’interpréteur de commandes interactif hébergé dans Azure et utilisé dans votre navigateur.Azure Cloud Shell is an interactive shell environment hosted in Azure and used through your browse. Azure Cloud Shell vous permet d’utiliser les interpréteurs de commandes bash ou PowerShell pour exécuter de nombreux outils afin d’utiliser les services Azure.Azure Cloud Shell allows you to use either bash or PowerShell shells to run a variety of tools to work with Azure services. Azure Cloud Shell est préinstallé avec les commandes qui vous permettent d’exécuter le contenu de cet article sans avoir à installer quoi que ce soit sur votre environnement local.Azure Cloud Shell comes pre-installed with the commands to allow you to run the content of this article without having to install anything on your local environment.

Pour exécuter le code contenu dans cet article sur Azure Cloud Shell, ouvrez une session Cloud Shell, utilisez le bouton Copier sur un bloc de code pour copier le code, et collez-le dans la session Cloud Shell avec Ctrl+Maj+V sur Windows et Linux, ou Cmd+Maj+V sur macOS.To run any code contained in this article on Azure Cloud Shell, open a Cloud Shell session, use the Copy button on a code block to copy the code, and paste it into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS. Le texte collé n’est pas exécuté automatiquement, vous devez appuyer sur Entrée pour exécuter le code.Pasted text is not automatically executed, so press Enter to run code.

Vous pouvez lancer Azure Cloud Shell avec :You can launch Azure Cloud Shell with:

Sélectionnez Essayer dans le coin supérieur droit d’un bloc de code.Select Try It in the upper-right corner of a code block. Cette opération ne copie pas automatiquement le texte dans Cloud Shell.This doesn't automatically copy text to Cloud Shell. Exemple Essayer pour Azure Cloud Shell
Ouvrez shell.azure.com dans votre navigateur.Open shell.azure.com in your browser. Bouton Lancer Azure Cloud ShellLaunch Azure Cloud Shell button
Sélectionnez le bouton Cloud Shell du menu situé en haut à droite du portail Azure.Select the Cloud Shell button on the menu in the upper-right corner of the Azure portal. Bouton Cloud Shell du portail Azure

Déployer des applications dans AzureDeploy app to Azure

Dans cette étape, vous déployez votre application .NET Core connectée à SQL Database sur App Service.In this step, you deploy your SQL Database-connected .NET Core application to App Service.

Configurer le déploiement Git localConfigure local git deployment

Dans Azure Cloud Shell, configurez des informations d’identification de déploiement avec la commande az webapp deployment user set.In the Azure Cloud Shell, configure deployment credentials with the az webapp deployment user set command. Cet utilisateur de déploiement est requis pour les déploiements FTP et Git en local sur une application web.This deployment user is required for FTP and local Git deployment to a web app. Le nom d’utilisateur et le mot de passe sont tous les deux au niveau du compte.The username and password are account level. Ils sont différents des informations d’identification de votre abonnement Azure.They're different from your Azure subscription credentials.

Dans l’exemple suivant, remplacez <username> et <password> , parenthèses comprises, par le nom et le mot de passe du nouvel utilisateur.In the following example, replace <username> and <password>, including the brackets, with a new username and password. Le nom d’utilisateur doit être unique au sein de Azure.The username must be unique within Azure. Le mot de passe doit comporter au moins huit caractères et inclure deux des trois éléments suivants : lettres, chiffres et symboles.The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.

az webapp deployment user set --user-name <username> --password <password>

Vous obtenez une sortie JSON, avec le mot de passe indiqué comme étant null.You get a JSON output with the password shown as null. Si vous obtenez une erreur 'Conflict'. Details: 409, modifiez le nom d’utilisateur.If you get a 'Conflict'. Details: 409 error, change the username. Si vous obtenez une erreur 'Bad Request'. Details: 400, utilisez un mot de passe plus fort.If you get a 'Bad Request'. Details: 400 error, use a stronger password. Le nom d’utilisateur de déploiement ne doit pas contenir le symbole « @ » pour les opérations push Git locales.The deployment username must not contain ‘@’ symbol for local Git pushes.

Vous ne configurez cet utilisateur de déploiement qu’une seule fois.You configure this deployment user only once. Vous pouvez l’utiliser pour tous vos déploiements Azure.You can use it for all your Azure deployments.

Notes

Enregistrez le nom d’utilisateur et le mot de passe.Record the username and password. Vous en aurez besoin pour déployer ultérieurement l’application web.You need them to deploy the web app later.

Créer un groupe de ressourcesCreate a resource group

Un groupe de ressources est un conteneur logique dans lequel les ressources Azure comme les applications web, les bases de données et les comptes de stockage sont déployés et gérés.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Par exemple, vous pouvez choisir de supprimer le groupe de ressources complet ultérieurement en une seule étape.For example, you can choose to delete the entire resource group in one simple step later.

Dans Cloud Shell, créez un groupe de ressources avec la commande az group create.In the Cloud Shell, create a resource group with the az group create command. L’exemple suivant crée un groupe de ressources nommé myResourceGroup à l’emplacement Europe Ouest.The following example creates a resource group named myResourceGroup in the West Europe location. Pour afficher tous les emplacements pris en charge pour App Service au niveau Gratuit, exécutez la commande az appservice list-locations --sku FREE.To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

az group create --name myResourceGroup --location "West Europe"

Vous créez généralement votre groupe de ressources et les ressources dans une région proche de chez vous.You generally create your resource group and the resources in a region near you.

Une fois la commande terminée, une sortie JSON affiche les propriétés du groupe de ressources.When the command finishes, a JSON output shows you the resource group properties.

Créer un plan App ServiceCreate an App Service plan

Dans Cloud Shell, créez un plan App Service avec la commande az appservice plan create.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

L’exemple suivant crée un plan App Service nommé myAppServicePlan dans le niveau tarifaire Gratuit :The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

Lorsque le plan App Service est créé, l’interface Azure CLI affiche des informations similaires à l’exemple suivant :When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Créer une application webCreate a web app

Créer une application web dans le plan App Service myAppServicePlan.Create a web app in the myAppServicePlan App Service plan.

Dans Cloud Shell, vous pouvez utiliser la commande az webapp create.In the Cloud Shell, you can use the az webapp create command. Dans l’exemple suivant, remplacez <app-name> par un nom d’application unique (les caractères autorisés sont a-z, 0-9 et -).In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -).

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --deployment-local-git

Une fois l’application web créée, Azure CLI affiche une sortie similaire à l’exemple suivant :When the web app has been created, the Azure CLI shows output similar to the following example:

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Notes

L’URL du Git distant est indiquée dans la propriété deploymentLocalGitUrl, avec le format https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git.The URL of the Git remote is shown in the deploymentLocalGitUrl property, with the format https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git. Enregistrez cette URL, car vous en aurez besoin ultérieurement.Save this URL as you need it later.

Effectuer une transmission de type push vers Azure à partir de GitPush to Azure from Git

De retour dans la fenêtre du terminal local, ajoutez un référentiel distant Azure dans votre référentiel Git local.Back in the local terminal window, add an Azure remote to your local Git repository. Remplacez <deploymentLocalGitUrl-from-create-step> par l’URL du Git distant que vous avez enregistrée à la section Créer une app web.Replace <deploymentLocalGitUrl-from-create-step> with the URL of the Git remote that you saved from Create a web app.

git remote add azure <deploymentLocalGitUrl-from-create-step>

Effectuez une transmission de type push vers le référentiel distant Azure pour déployer votre application à l’aide de la commande suivante.Push to the Azure remote to deploy your app with the following command. Quand Git Credential Manager vous invite à entrer vos informations d’identification, veillez à entrer celles que vous avez créées dans la section Configurer un utilisateur de déploiement, et non pas celles vous permettant de vous connecter au portail Azure.When prompted for credentials by Git Credential Manager, make sure that you enter the credentials you created in Configure a deployment user, not the credentials you use to sign in to the Azure portal.

git push azure master

L’exécution de cette commande peut prendre quelques minutes.This command may take a few minutes to run. Pendant son exécution, des informations semblables à ce qui suit s’affichent :While running, it displays information similar to the following example:

Counting objects: 98, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (92/92), done.
Writing objects: 100% (98/98), 524.98 KiB | 5.58 MiB/s, done.
Total 98 (delta 8), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: .
remote: Updating submodules.
remote: Preparing deployment for commit id '0c497633b8'.
remote: Generating deployment script.
remote: Project file path: ./DotNetCoreSqlDb.csproj
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling ASP.NET Core Web Application deployment.
remote: .
remote: .
remote: .
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
remote: App container will begin restart within 10 seconds.
To https://<app_name>.scm.azurewebsites.net/<app_name>.git
 * [new branch]      master -> master

Accéder à l’application AzureBrowse to the Azure app

Accédez à http://<app_name>.azurewebsites.net/swagger dans un navigateur et familiarisez-vous avec l’interface utilisateur Swagger.Navigate to http://<app_name>.azurewebsites.net/swagger in a browser and play with the Swagger UI.

API ASP.NET Core exécuté dans Azure App Service

Accédez à http://<app_name>.azurewebsites.net/swagger/v1/swagger.json pour voir le swagger.json de l’API déployée.Navigate to http://<app_name>.azurewebsites.net/swagger/v1/swagger.json to see the swagger.json for your deployed API.

Accédez à http://<app_name>.azurewebsites.net/api/todo pour voir l’API déployée en fonctionnement.Navigate to http://<app_name>.azurewebsites.net/api/todo to see your deployed API working.

Ajoutez des fonctionnalités CORSAdd CORS functionality

Ensuite, activez la prise en charge intégrée de CORS dans App Service pour votre API.Next, you enable the built-in CORS support in App Service for your API.

Testez CORS dans l’exemple d’applicationTest CORS in sample app

Dans votre référentiel local, ouvrez wwwroot/index.html.In your local repository, open wwwroot/index.html.

Dans la ligne 51, définissez la variable apiEndpoint sur l’URL de l’API déployée (http://<app_name>.azurewebsites.net).In Line 51, set the apiEndpoint variable to the URL of your deployed API (http://<app_name>.azurewebsites.net). Remplacez <appname > avec le nom de votre application dans Azure App Service.Replace <appname> with your app name in App Service.

Dans la fenêtre de votre terminal local, exécutez à nouveau l’exemple d’application.In your local terminal window, run the sample app again.

dotnet run

Accédez à l’application de navigateur à http://localhost:5000.Navigate to the browser app at http://localhost:5000. Ouvrez la fenêtre d’outils de développement dans votre navigateur (Ctrl+Shift+i dans Chrome pour Windows) et inspectez l’onglet Console. Vous devriez maintenant voir le message d’erreur, No 'Access-Control-Allow-Origin' header is present on the requested resource.Open the developer tools window in your browser (Ctrl+Shift+i in Chrome for Windows) and inspect the Console tab. You should now see the error message, No 'Access-Control-Allow-Origin' header is present on the requested resource.

Erreur CORS dans le navigateur client

En raison de l’incompatibilité de domaine entre l’application de navigateur (http://localhost:5000) et la ressource à distance (http://<app_name>.azurewebsites.net), et du fait que votre API dans App Service n’envoie pas l’en-tête Access-Control-Allow-Origin, votre navigateur a empêché le chargement du contenu inter-domaines dans votre application de navigateur.Because of the domain mismatch between the browser app (http://localhost:5000) and remote resource (http://<app_name>.azurewebsites.net), and the fact that your API in App Service is not sending the Access-Control-Allow-Origin header, your browser has prevented cross-domain content from loading in your browser app.

En production, votre application de navigateur aurait une URL publique au lieu de l’URL de l’hôte local, mais la façon d’activer CORS est identique pour les deux types d’URL.In production, your browser app would have a public URL instead of the localhost URL, but the way to enable CORS to a localhost URL is the same as a public URL.

Activez CORSEnable CORS

Dans Cloud Shell, activez CORS pour votre URL de client à l’aide de la commande az resource update.In the Cloud Shell, enable CORS to your client's URL by using the az resource update command. Remplacez l’espace réservé <appname>.Replace the <appname> placeholder.

az resource update --name web --resource-group myResourceGroup --namespace Microsoft.Web --resource-type config --parent sites/<app_name> --set properties.cors.allowedOrigins="['http://localhost:5000']" --api-version 2015-06-01

Vous pouvez définir plusieurs URL de client dans properties.cors.allowedOrigins ("['URL1','URL2',...]").You can set more than one client URL in properties.cors.allowedOrigins ("['URL1','URL2',...]"). Vous pouvez également activer toutes les URL client avec "['*']".You can also enable all client URLs with "['*']".

Notes

Si votre application exige l’envoi d’informations d’identification, telles que des cookies ou des jetons d’authentification, le navigateur peut exiger l’en-tête ACCESS-CONTROL-ALLOW-CREDENTIALS dans la réponse.If your app requires credentials such as cookies or authentication tokens to be sent, the browser may require the ACCESS-CONTROL-ALLOW-CREDENTIALS header on the response. Pour ce faire, dans App Service, définissez properties.cors.supportCredentials sur true dans votre configuration CORS. Cela ne peut pas être activé lorsque allowedOrigins inclut '*'.To enable this in App Service, set properties.cors.supportCredentials to true in your CORS config. This cannot be enabled when allowedOrigins includes '*'.

Testez CORS à nouveauTest CORS again

Actualisez l’application de navigateur à http://localhost:5000.Refresh the browser app at http://localhost:5000. Le message d’erreur dans la fenêtre Console a désormais disparu, et vous pouvez afficher les données de l’API déployée et interagir avec elles.The error message in the Console window is now gone, and you can see the data from the deployed API and interact with it. Votre API distante prend désormais en charge CORS vers votre application de navigateur exécuté en local.Your remote API now supports CORS to your browser app running locally.

Succès de CORS dans le navigateur client

Félicitations, vous exécutez une API dans Azure App Service avec prise en charge de CORS.Congratulations, you're running an API in Azure App Service with CORS support.

Le CORS App Service et votre CORSApp Service CORS vs. your CORS

Vous pouvez utiliser vos propres utilitaires CORS au lieu de CORS App Service pour plus de souplesse.You can use your own CORS utilities instead of App Service CORS for more flexibility. Par exemple, vous souhaitez peut-être spécifier différentes origines autorisées pour des méthodes ou des itinéraires différents.For example, you may want to specify different allowed origins for different routes or methods. Étant donné que CORS App Service vous permet de spécifier un ensemble d’origines acceptées pour tous les itinéraires et méthodes de l’API, vous pouvez utiliser votre propre code CORS.Since App Service CORS lets you specify one set of accepted origins for all API routes and methods, you would want to use your own CORS code. ASP.NET Core L’activation de demandes de Cross-Origin (CORS).See how ASP.NET Core does it at Enabling Cross-Origin Requests (CORS).

Notes

N’essayez pas d’utiliser conjointement CORS App Service et votre propre code CORS.Don't try to use App Service CORS and your own CORS code together. Utilisés conjointement, CORS App Service est prioritaire et votre propre code CORS n’a aucun effet.When used together, App Service CORS takes precedence and your own CORS code has no effect.

Supprimer des ressourcesClean up resources

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources.In the preceding steps, you created Azure resources in a resource group. Si vous ne pensez pas avoir besoin de ces ressources à l’avenir, supprimez le groupe de ressources en exécutant la commande suivante dans Cloud Shell :If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

L’exécution de cette commande peut prendre une minute.This command may take a minute to run.

Étapes suivantesNext steps

Vous avez appris à effectuer les opérations suivantes :What you learned:

  • Créer des ressources App Service à l’aide d’Azure CLICreate App Service resources using Azure CLI
  • Déployer une API RESTful sur Azure à l’aide de GitDeploy a RESTful API to Azure using Git
  • Activer la prise en charge de CORS sur App ServiceEnable App Service CORS support

Passez au tutoriel suivant pour découvrir comment authentifier et autoriser des utilisateurs.Advance to the next tutorial to learn how to authenticate and authorize users.