Tutorial: Hosten einer RESTful-API mit CORS in Azure App ServiceTutorial: Host a RESTful API with CORS in Azure App Service

• 04/28/2020
• 8 Minuten Lesedauer
• • c
  • o
  • O

Von Azure App Service wird ein hochgradig skalierbarer Webhostingdienst mit Self-Patching bereitgestellt.Azure App Service provides a highly scalable, self-patching web hosting service. Darüber hinaus bietet App Service integrierte Unterstützung für die Ressourcenfreigabe zwischen verschiedenen Ursprüngen (Cross-Origin Resource Sharing, CORS) für RESTful-APIs.In addition, App Service has built-in support for Cross-Origin Resource Sharing (CORS) for RESTful APIs. In diesem Tutorial erfahren Sie, wie Sie eine ASP.NET Core-API-App mit CORS-Unterstützung in App Service bereitstellen.This tutorial shows how to deploy an ASP.NET Core API app to App Service with CORS support. Die App wird mithilfe von Befehlszeilentools konfiguriert und unter Verwendung von Git bereitgestellt.You configure the app using command-line tools and deploy the app using Git.

In diesem Tutorial lernen Sie Folgendes:In this tutorial, you learn how to:

Die Schritte in diesem Tutorial können unter macOS, Linux und Windows ausgeführt werden.You can follow the steps in this tutorial on macOS, Linux, Windows.

Wenn Sie kein Azure-Abonnement besitzen, erstellen Sie ein kostenloses Konto, bevor Sie beginnen.If you don't have an Azure subscription, create a free account before you begin.

VoraussetzungenPrerequisites

Für dieses Tutorial benötigen Sie Folgendes:To complete this tutorial:

• Installation von GitInstall Git
• Installation des aktuellen .NET Core 3.1 SDKInstall the latest .NET Core 3.1 SDK

Erstellen einer lokalen ASP.NET Core-AppCreate local ASP.NET Core app

In diesem Schritt richten Sie das lokale ASP.NET Core-Projekt ein.In this step, you set up the local ASP.NET Core project. App Service unterstützt den gleichen Workflow für APIs in anderen Sprachen.App Service supports the same workflow for APIs written in other languages.

Klonen der BeispielanwendungClone the sample application

Wechseln Sie im Terminalfenster mit cd in ein Arbeitsverzeichnis.In the terminal window, cd to a working directory.

Führen Sie den folgenden Befehl aus, um das Beispielrepository zu klonen.Run the following command to clone the sample repository.

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

Dieses Repository enthält eine App, die auf der Grundlage des folgenden Tutorials erstellt wurde: ASP.NET Core-Web-API-Hilfeseiten mit Swagger.This repository contains an app that's created based on the following tutorial: ASP.NET Core Web API help pages using Swagger. Diese App verwendet einen Swagger-Generator, um die Swagger-Benutzeroberfläche und den Swagger-JSON-Endpunkt bereitzustellen.It uses a Swagger generator to serve the Swagger UI and the Swagger JSON endpoint.

Ausführen der AnwendungRun the application

Führen Sie die folgenden Befehle aus, um die erforderlichen Pakete zu installieren, Datenbankmigrationen auszuführen und die Anwendung zu starten.Run the following commands to install the required packages, run database migrations, and start the application.

cd dotnet-core-api
dotnet restore
dotnet run

Navigieren Sie in einem Browser zu http://localhost:5000/swagger, um ein wenig mit der Swagger-Benutzeroberfläche zu experimentieren.Navigate to http://localhost:5000/swagger in a browser to play with the Swagger UI.

Navigieren Sie zu http://localhost:5000/api/todo, um eine Liste mit JSON-ToDo-Elementen anzuzeigen.Navigate to http://localhost:5000/api/todo and see a list of ToDo JSON items.

Navigieren Sie zu http://localhost:5000, und experimentieren Sie ein wenig mit der Browser-App.Navigate to http://localhost:5000 and play with the browser app. Später verweisen Sie in der Browser-App auf eine Remote-API in App Service, um die CORS-Funktion zu testen.Later, you will point the browser app to a remote API in App Service to test CORS functionality. Code für die Browser-App finden Sie im Verzeichnis wwwroot des Repositorys.Code for the browser app is found in the repository's wwwroot directory.

Sie können ASP.NET Core jederzeit beenden, indem Sie im Terminal Ctrl+C drücken.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Verwenden von Azure Cloud ShellUse Azure Cloud Shell

Azure hostet Azure Cloud Shell, eine interaktive Shell-Umgebung, die Sie über Ihren Browser nutzen können.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Sie können entweder Bash oder PowerShell mit Cloud Shell verwenden, um mit Azure-Diensten zu arbeiten.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Sie können die vorinstallierten Befehle von Cloud Shell verwenden, um den Code in diesem Artikel auszuführen, ohne etwas in Ihrer lokalen Umgebung installieren zu müssen.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Starten von Azure Cloud Shell:To start Azure Cloud Shell:

OptionOption	Beispiel/LinkExample/Link
Klicken Sie in der rechten oberen Ecke eines Codeblocks auf Ausprobieren.Select Try It in the upper-right corner of a code block. Durch die Auswahl von Ausprobieren wird der Code nicht automatisch in Cloud Shell kopiert.Selecting Try It doesn't automatically copy the code to Cloud Shell.
Rufen Sie https://shell.azure.com auf, oder wählen Sie die Schaltfläche Cloud Shell starten, um Cloud Shell im Browser zu öffnen.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser.
Wählen Sie im Azure-Portal rechts oben im Menü die Schaltfläche Cloud Shell aus.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal.

Ausführen des Codes in diesem Artikel in Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

1. Starten Sie Cloud Shell.Start Cloud Shell.

2. Wählen Sie die Schaltfläche Kopieren für einen Codeblock, um den Code zu kopieren.Select the Copy button on a code block to copy the code.

3. Fügen Sie den Code mit STRG+UMSCHALT+V unter Windows und Linux oder Cmd+UMSCHALT+V unter macOS in die Cloud Shell-Sitzung ein.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

4. Drücken Sie die EINGABETASTE, um den Code auszuführen.Select Enter to run the code.

Bereitstellen von Apps in AzureDeploy app to Azure

In diesem Schritt stellen Sie die mit der SQL-Datenbank verbundene .NET Core-Anwendung für App Service bereit.In this step, you deploy your SQL Database-connected .NET Core application to App Service.

Konfigurieren der lokalen Git-BereitstellungConfigure local git deployment

Für die Bereitstellung in einer Azure-Web-App über FTP oder ein lokales Git kann ein Bereitstellungsbenutzer verwendet werden.FTP and local Git can deploy to an Azure web app by using a deployment user. Nach der Konfiguration des Bereitstellungsbenutzers können Sie ihn für alle Azure-Bereitstellungen verwenden.Once you configure your deployment user, you can use it for all your Azure deployments. Der Benutzername und das Kennwort für die Bereitstellung auf Kontoebene unterscheiden sich von den Anmeldeinformationen für Ihr Azure-Abonnement.Your account-level deployment username and password are different from your Azure subscription credentials.

Führen Sie zum Konfigurieren des Bereitstellungsbenutzers den Befehl az webapp deployment user set in Azure Cloud Shell aus.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Ersetzen Sie <username> und <password> durch Ihren Benutzernamen bzw. Ihr Kennwort für die Bereitstellung.Replace <username> and <password> with a deployment user username and password.

• Der Benutzername muss in Azure eindeutig sein und darf bei lokalen Git-Pushes nicht das Symbol „@“ enthalten.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
• Das Kennwort muss mindestens acht Zeichen lang sein und zwei der folgenden drei Elemente enthalten: Buchstaben, Zahlen und Symbole.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>

In der JSON-Ausgabe wird das Kennwort als null angezeigt.The JSON output shows the password as null. Wenn Sie den Fehler 'Conflict'. Details: 409 erhalten, müssen Sie den Benutzernamen ändern.If you get a 'Conflict'. Details: 409 error, change the username. Wenn Sie den Fehler 'Bad Request'. Details: 400 erhalten, müssen Sie ein sichereres Kennwort verwenden.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Notieren Sie Ihren Benutzernamen und Ihr Kennwort für die Bereitstellung Ihrer Web-Apps.Record your username and password to use to deploy your web apps.

Erstellen einer RessourcengruppeCreate a resource group

Eine Ressourcengruppe ist ein logischer Container, in dem Azure-Ressourcen wie Web-Apps, Datenbanken und Speicherkonten bereitgestellt und verwaltet werden.A resource group is a logical container into which Azure resources, such as web apps, databases, and storage accounts, are deployed and managed. Sie können z.B. die gesamte Ressourcengruppe später in einem einfachen Schritt löschen.For example, you can choose to delete the entire resource group in one simple step later.

Erstellen Sie in Cloud Shell mit dem Befehl az group create eine Ressourcengruppe.In the Cloud Shell, create a resource group with the az group create command. Das folgende Beispiel erstellt eine Ressourcengruppe mit dem Namen myResourceGroup am Standort Europa, Westen.The following example creates a resource group named myResourceGroup in the West Europe location. Wenn Sie alle unterstützten Standorte für App Service im Free-Tarif anzeigen möchten, führen Sie den Befehl az appservice list-locations --sku FREE aus.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"

Im Allgemeinen erstellen Sie Ressourcengruppen und Ressourcen in einer Region in Ihrer Nähe.You generally create your resource group and the resources in a region near you.

Nach Ausführung dieses Befehls werden die Ressourcengruppeneigenschaften in einer JSON-Ausgabe angezeigt.When the command finishes, a JSON output shows you the resource group properties.

Wie erstelle ich einen Plan?Create an App Service plan

Erstellen Sie in Cloud Shell mit dem Befehl az appservice plan create einen App Service-Plan.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

Im folgenden Beispiel wird ein App Service-Plan namens myAppServicePlan mit dem Tarif Free erstellt: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

Nach Erstellung des App Service-Plans zeigt die Azure-Befehlszeilenschnittstelle Informationen wie im folgenden Beispiel an: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
} 

Erstellen einer Web-AppCreate a web app

Erstellen Sie eine Web-App im App Service-Plan myAppServicePlan.Create a web app in the myAppServicePlan App Service plan.

In Cloud Shell können Sie den Befehl az webapp create verwenden.In the Cloud Shell, you can use the az webapp create command. Ersetzen Sie im folgenden Beispiel <app-name> durch einen global eindeutigen App-Namen (gültige Zeichen sind a-z, 0-9 und -).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

Nach Erstellung der Web-App zeigt die Azure CLI eine Ausgabe wie im folgenden Beispiel an: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,
  "clientCertExclusionPaths": null,
  "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. >
}

Übertragen von Git an Azure mithilfe von PushPush to Azure from Git

Kehren Sie zum lokalen Terminalfenster zurück, und fügen Sie Ihrem lokalen Git-Repository einen Azure-Remotespeicherort hinzu.Back in the local terminal window, add an Azure remote to your local Git repository. Ersetzen Sie <deploymentLocalGitUrl-from-create-step> durch die URL des Git-Remotespeicherorts, die Sie unter Erstellen einer Web-App gespeichert haben.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>

Führen Sie einen Pushvorgang zum Azure-Remotespeicherort durch, um Ihre App mit dem folgenden Befehl bereitzustellen.Push to the Azure remote to deploy your app with the following command. Wenn Sie von der Git-Anmeldeinformationsverwaltung zur Eingabe von Anmeldeinformationen aufgefordert werden, müssen Sie die Anmeldeinformationen eingeben, die Sie in Konfigurieren eines Bereitstellungsbenutzers erstellt haben (nicht die Anmeldeinformationen, die Sie zur Anmeldung beim Azure-Portal verwenden).When Git Credential Manager prompts you for credentials, make sure 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

Die Ausführung dieses Befehls kann einige Minuten in Anspruch nehmen.This command may take a few minutes to run. Während der Ausführung werden Informationen angezeigt, die den Informationen im folgenden Beispiel ähneln:While running, it displays information similar to the following example:

Enumerating objects: 83, done.
Counting objects: 100% (83/83), done.
Delta compression using up to 8 threads
Compressing objects: 100% (78/78), done.
Writing objects: 100% (83/83), 22.15 KiB | 3.69 MiB/s, done.
Total 83 (delta 26), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '509236e13d'.
remote: Generating deployment script.
remote: Project file path: .\TodoApi.csproj
remote: Generating deployment script for ASP.NET MSBuild16 App
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling ASP.NET Core Web Application deployment with MSBuild16.
remote: .
remote: .
remote: .
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Triggering recycle (preview mode disabled).
remote: Deployment successful.
To https://<app_name>.scm.azurewebsites.net/<app_name>.git
 * [new branch]      master -> master

Navigieren zur Azure-AppBrowse to the Azure app

Navigieren Sie in einem Browser zu http://<app_name>.azurewebsites.net/swagger, und experimentieren Sie ein wenig mit der Swagger-Benutzeroberfläche.Navigate to http://<app_name>.azurewebsites.net/swagger in a browser and play with the Swagger UI.

Navigieren Sie zu http://<app_name>.azurewebsites.net/swagger/v1/swagger.json, um swagger.json für Ihre bereitgestellte API anzuzeigen.Navigate to http://<app_name>.azurewebsites.net/swagger/v1/swagger.json to see the swagger.json for your deployed API.

Navigieren Sie zu http://<app_name>.azurewebsites.net/api/todo, um Ihre bereitgestellte API in Aktion zu sehen.Navigate to http://<app_name>.azurewebsites.net/api/todo to see your deployed API working.

Hinzufügen der CORS-FunktionAdd CORS functionality

Als Nächstes aktivieren Sie die integrierte CORS-Unterstützung in App Service für Ihre API.Next, you enable the built-in CORS support in App Service for your API.

Testen von CORS in der Beispiel-AppTest CORS in sample app

Öffnen Sie wwwroot/index.html in Ihrem lokalen Repository.In your local repository, open wwwroot/index.html.

Legen Sie die Variable apiEndpoint in Zeile 51 auf die URL Ihrer bereitgestellten API (http://<app_name>.azurewebsites.net) fest.In Line 51, set the apiEndpoint variable to the URL of your deployed API (http://<app_name>.azurewebsites.net). Ersetzen Sie <appname> durch den Namen Ihrer App in App Service.Replace <appname> with your app name in App Service.

Führen Sie die Beispiel-App erneut in Ihrem lokalen Terminalfenster aus.In your local terminal window, run the sample app again.

dotnet run

Navigieren Sie zur Browser-App (http://localhost:5000).Navigate to the browser app at http://localhost:5000. Öffnen Sie in Ihrem Browser das Fenster mit den Entwicklertools (Ctrl+Shift+i in Chrome für Windows), und sehen Sie sich die Registerkarte Konsole an. Hier sollte nun die folgende Fehlermeldung angezeigt werden: 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.

Aufgrund des Domänenkonflikts zwischen Browser-App (http://localhost:5000) und Remoteressource (http://<app_name>.azurewebsites.net) und der Tatsache, dass Ihre API in App Service nicht den Header Access-Control-Allow-Origin sendet, hat der Browser das Laden domänenübergreifender Inhalte in Ihrer Browser-App verhindert.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.

In der Produktionsumgebung verfügt Ihre Browser-App anstelle der localhost-URL über eine öffentliche URL. Die Vorgehensweise zum Aktivieren von CORS ist jedoch in beiden Fällen identisch.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.

Aktivieren von CORSEnable CORS

Aktivieren Sie CORS in Cloud Shell mithilfe des Befehls az webapp cors add für die URL Ihres Clients.In the Cloud Shell, enable CORS to your client's URL by using the az webapp cors add command. Ersetzen Sie den Platzhalter <app-name> .Replace the <app-name> placeholder.

az webapp cors add --resource-group myResourceGroup --name <app-name> --allowed-origins 'http://localhost:5000'

In properties.cors.allowedOrigins können mehrere Client-URLs festgelegt werden ("['URL1','URL2',...]").You can set more than one client URL in properties.cors.allowedOrigins ("['URL1','URL2',...]"). Sie können auch "['*']" verwenden, um alle Client-URLs zu aktivieren.You can also enable all client URLs with "['*']".

Erneutes Testen von CORSTest CORS again

Aktualisieren Sie Ihre Browser-App unter http://localhost:5000.Refresh the browser app at http://localhost:5000. Die Fehlermeldung im Fenster Konsole ist nun nicht mehr vorhanden. Stattdessen werden Daten der bereitgestellten API angezeigt, mit denen Sie interagieren können.The error message in the Console window is now gone, and you can see the data from the deployed API and interact with it. Ihre Remote-API unterstützt jetzt CORS für Ihre lokal ausgeführte Browser-App.Your remote API now supports CORS to your browser app running locally.

Sie verfügen nun über eine API in Azure App Service mit CORS-Unterstützung.Congratulations, you're running an API in Azure App Service with CORS support.

App Service-CORS im Vergleich zu eigenem CORSApp Service CORS vs. your CORS

Wenn Sie mehr Flexibilität benötigen, können Sie anstelle von App Service-CORS auch eigene CORS-Hilfsprogramme verwenden.You can use your own CORS utilities instead of App Service CORS for more flexibility. Dies kann beispielsweise erforderlich sein, wenn Sie verschiedene zulässige Ursprünge für verschiedene Routen oder Methoden angeben möchten.For example, you may want to specify different allowed origins for different routes or methods. Da bei App Service-CORS für alle API-Routen und -Methoden nur ein einzelner Satz von zulässigen Ursprüngen angegeben werden kann, müssten Sie in diesem Fall Ihren eigenen CORS-Code verwenden.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. Informationen zur Umsetzung in ASP.NET Core finden Sie unter Enabling Cross-Origin Requests (CORS) (Aktivieren von CORS).See how ASP.NET Core does it at Enabling Cross-Origin Requests (CORS).

Bereinigen von RessourcenClean up resources

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt.In the preceding steps, you created Azure resources in a resource group. Wenn Sie diese Ressourcen in Zukunft nicht mehr benötigen, löschen Sie die Ressourcengruppe, indem Sie den folgenden Befehl in Cloud Shell ausführen: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

Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.This command may take a minute to run.

Nächste SchritteNext steps

Sie haben Folgendes gelernt:What you learned:

Fahren Sie mit dem nächsten Tutorial fort, um zu erfahren, wie Sie Benutzer authentifizieren und autorisieren.Advance to the next tutorial to learn how to authenticate and authorize users.