Kurz: Hostování rozhraní RESTful API s CORS v Azure App ServiceTutorial: Host a RESTful API with CORS in Azure App Service

Azure App Service je vysoce škálovatelná služba s automatickými opravami pro hostování webů.Azure App Service provides a highly scalable, self-patching web hosting service. Kromě toho zahrnuje App Service integrovanou podporu Sdílení prostředků různého původu (CORS) pro rozhraní RESTful API.In addition, App Service has built-in support for Cross-Origin Resource Sharing (CORS) for RESTful APIs. V tomto kurzu se dozvíte, jak do App Service nasadit aplikaci ASP.NET Core API s podporou CORS.This tutorial shows how to deploy an ASP.NET Core API app to App Service with CORS support. Aplikaci nakonfigurujete pomocí nástrojů příkazového řádku a nasadíte pomocí Gitu.You configure the app using command-line tools and deploy the app using Git.

V tomto kurzu se naučíte:In this tutorial, you learn how to:

  • Vytvoření prostředků App Service pomocí Azure CLICreate App Service resources using Azure CLI
  • Nasazení rozhraní RESTful API do Azure pomocí GituDeploy a RESTful API to Azure using Git
  • Povolení podpory CORS v App ServiceEnable App Service CORS support

Podle kroků v tomto kurzu můžete postupovat v systémech macOS, Linux a Windows.You can follow the steps in this tutorial on macOS, Linux, Windows.

Pokud ještě nemáte předplatné Azure, vytvořte si bezplatný účet před tím, než začnete.If you don't have an Azure subscription, create a free account before you begin.

PožadavkyPrerequisites

Pro absolvování tohoto kurzu potřebujete:To complete this tutorial:

Vytvoření místní aplikace ASP.NET CoreCreate local ASP.NET Core app

V tomto kroku nastavíte místní projekt ASP.NET Core.In this step, you set up the local ASP.NET Core project. App Service podporuje stejný pracovní postup i pro rozhraní API napsaná v jiných jazycích.App Service supports the same workflow for APIs written in other languages.

Klonování ukázkové aplikaceClone the sample application

V okně terminálu přejděte pomocí příkazu cd do pracovního adresáře.In the terminal window, cd to a working directory.

Ukázkové úložiště naklonujete spuštěním následujícího příkazu.Run the following command to clone the sample repository.

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

Toto úložiště obsahuje aplikaci vytvořenou podle následujícího kurzu: Generování stránek nápovědy webového rozhraní ASP.NET Core API pomocí Swaggeru.This repository contains an app that's created based on the following tutorial: ASP.NET Core Web API help pages using Swagger. Aplikace s využitím generátoru Swagger poskytuje uživatelské rozhraní Swagger a koncový bod JSON pro Swagger.It uses a Swagger generator to serve the Swagger UI and the Swagger JSON endpoint.

Spuštění aplikaceRun the application

Spuštěním následujících příkazů nainstalujte požadované balíčky, spusťte operace migrace databáze a spusťte aplikaci.Run the following commands to install the required packages, run database migrations, and start the application.

cd dotnet-core-api
dotnet restore
dotnet run

V prohlížeči přejděte na adresu http://localhost:5000/swagger a vyzkoušejte si uživatelské rozhraní Swagger.Navigate to http://localhost:5000/swagger in a browser to play with the Swagger UI.

Místně spuštěné rozhraní ASP.NET Core API

Přejděte na adresu http://localhost:5000/api/todo, kde se zobrazí seznam položek úkolů ve formátu JSON.Navigate to http://localhost:5000/api/todo and see a list of ToDo JSON items.

Přejděte na adresu http://localhost:5000 a vyzkoušejte si aplikaci v prohlížeči.Navigate to http://localhost:5000 and play with the browser app. Později otestujete funkce CORS nastavením aplikace v prohlížeči tak, aby odkazovala na vzdálené rozhraní API v App Service.Later, you will point the browser app to a remote API in App Service to test CORS functionality. Kód aplikace v prohlížeči najdete v adresáři wwwroot úložiště.Code for the browser app is found in the repository's wwwroot directory.

ASP.NET Core můžete kdykoli zastavit stisknutím Ctrl+C v terminálu.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Použití služby Azure Cloud ShellUse Azure Cloud Shell

Azure hostí interaktivní prostředí Azure Cloud Shell, které můžete používat v prohlížeči.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Pro práci se službami Azure můžete v prostředí Cloud Shell použít buď Bash, nebo PowerShell.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Můžete použít předinstalované příkazy služby Cloud Shell ke spuštění kódu uvedeného v tomto článku, aniž byste museli instalovat cokoli do svého místního prostředí.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Spuštění služby Azure Cloud Shell:To start Azure Cloud Shell:

MožnostOption Příklad nebo odkazExample/Link
Zvolte Vyzkoušet v pravém horním rohu bloku kódu.Select Try It in the upper-right corner of a code block. Výběr Vyzkoušet automaticky nekopíruje kód do služby Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Příklad Vyzkoušet služby Azure Cloud Shell
Přejděte na adresu https://shell.azure.com nebo výběrem tlačítka Spustit Cloud Shell otevřete Cloud Shell v prohlížeči.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Spuštění služby Cloud Shell v novém okněLaunch Cloud Shell in a new window
Zvolte tlačítko Cloud Shell v pruhu nabídky v pravém horním rohu webu Azure Portal.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Tlačítko Cloud Shell na webu Azure Portal

Pokud chcete spustit kód uvedený v tomto článku ve službě Azure Cloud Shell, postupujte takto:To run the code in this article in Azure Cloud Shell:

  1. Spusťte Cloud Shell.Start Cloud Shell.

  2. Vyberte tlačítko Kopírovat na bloku kódu a kód zkopírujte.Select the Copy button on a code block to copy the code.

  3. Vložte kód do relace Cloud Shell pomocí kláves Ctrl+Shift+V ve Windows a Linuxu nebo pomocí kláves Cmd+Shift+V v systému macOS.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. Spusťte kód stisknutím klávesy Enter.Select Enter to run the code.

Nasazení aplikace do AzureDeploy app to Azure

V tomto kroku nasadíte aplikaci .NET Core připojenou k databázi SQL do služby App Service.In this step, you deploy your SQL Database-connected .NET Core application to App Service.

Konfigurace nasazení místního gituConfigure local git deployment

FTP a místní Git se můžou nasadit do webové aplikace Azure pomocí uživatele nasazení.FTP and local Git can deploy to an Azure web app by using a deployment user. Jakmile nakonfigurujete uživatele nasazení, můžete ho použít pro všechna nasazení Azure.Once you configure your deployment user, you can use it for all your Azure deployments. Uživatelské jméno a heslo nasazení na úrovni účtu se liší od přihlašovacích údajů předplatného Azure.Your account-level deployment username and password are different from your Azure subscription credentials.

Pokud chcete nakonfigurovat uživatele nasazení, spusťte v Azure Cloud Shell příkaz AZ WebApp Deployment User set .To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Nahraďte <username> a <password> pomocí uživatelského jména a hesla pro nasazení.Replace <username> and <password> with a deployment user username and password.

  • Uživatelské jméno musí být v rámci Azure jedinečné a pro místní nabízená oznámení Git nesmí obsahovat symbol @.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Heslo musí mít délku alespoň osm znaků a dva z následujících tří prvků: písmena, číslice a symboly.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>

Výstup JSON zobrazuje heslo jako null .The JSON output shows the password as null. Pokud se zobrazí chyba 'Conflict'. Details: 409, změňte uživatelské jméno.If you get a 'Conflict'. Details: 409 error, change the username. Pokud se zobrazí chyba 'Bad Request'. Details: 400, použijte silnější heslo.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Poznamenejte si uživatelské jméno a heslo, které chcete použít k nasazení webových aplikací.Record your username and password to use to deploy your web apps.

Vytvoření skupiny prostředkůCreate a resource group

Skupina prostředků je logický kontejner, ve kterém se nasazují a spravují prostředky Azure, jako jsou webové aplikace, databáze a účty úložiště.A resource group is a logical container into which Azure resources, such as web apps, databases, and storage accounts, are deployed and managed. Později se například můžete rozhodnout odstranit celou skupinu prostředků v jednom jednoduchém kroku.For example, you can choose to delete the entire resource group in one simple step later.

V Cloud Shell vytvořte skupinu prostředků pomocí az group create příkazu.In the Cloud Shell, create a resource group with the az group create command. Následující příklad vytvoří skupinu prostředků myResourceGroup v umístění Západní Evropa.The following example creates a resource group named myResourceGroup in the West Europe location. Pokud chcete zobrazit všechna podporovaná umístění pro službu App Service na úrovni Free, spusťte příkaz 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"

Obvykle budete svoji skupinu prostředků a prostředky vytvářet v oblasti, kterou máte blízko.You generally create your resource group and the resources in a region near you.

Po dokončení příkazu se ve výstupu JSON zobrazí vlastnosti skupiny prostředků.When the command finishes, a JSON output shows you the resource group properties.

Vytvoření plánu služby App ServiceCreate an App Service plan

V Cloud Shell vytvořte App Service plán pomocí az appservice plan create příkazu.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

Následující příklad vytvoří plán služby App Service s názvem myAppServicePlan v cenové úrovni Free: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

Po vytvoření plánu služby App Service se v rozhraní příkazového řádku Azure zobrazí podobné informace jako v následujícím příkladu: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
} 

Vytvoření webové aplikaceCreate a web app

Vytvořte webovou aplikaci v myAppServicePlan plánu App Service.Create a web app in the myAppServicePlan App Service plan.

V Cloud Shell můžete použít az webapp create příkaz.In the Cloud Shell, you can use the az webapp create command. V následujícím příkladu nahraďte <app-name> globálně jedinečným názvem aplikace (platné znaky jsou a-z, 0-9 a -).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

Po vytvoření webové aplikace Azure CLI zobrazí výstup podobný následujícímu příkladu: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. >
}

Poznámka

Adresa URL vzdáleného úložiště Git se zobrazuje ve vlastnosti deploymentLocalGitUrl ve formátu 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. Tuto adresu URL si uložte, protože ji budete potřebovat později.Save this URL as you need it later.

Přenos z Gitu do AzurePush to Azure from Git

Zpět v okně místního terminálu přidejte vzdálené úložiště Azure do místního úložiště Git.Back in the local terminal window, add an Azure remote to your local Git repository. Nahraďte <deploymentLocalGitUrl-from-create-step> adresou URL vzdáleného úložiště Git, kterou jste uložili z části Vytvoření webové aplikace.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>

Nasaďte aplikaci do vzdáleného úložiště Azure pomocí následujícího příkazu.Push to the Azure remote to deploy your app with the following command. Když vám správce přihlašovacích údajů Git vyzve k zadání přihlašovacích údajů, ujistěte se, že jste zadali přihlašovací údaje, které jste vytvořili v části Konfigurace uživatele nasazení, a ne přihlašovací údaje, které používáte k přihlášení k Azure Portal.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

Spuštění tohoto příkazu může trvat několik minut.This command may take a few minutes to run. Při spuštění příkaz zobrazí podobné informace jako v následujícím příkladu: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

Přejít k aplikaci AzureBrowse to the Azure app

V prohlížeči přejděte na adresu http://<app_name>.azurewebsites.net/swagger a vyzkoušejte si uživatelské rozhraní Swagger.Navigate to http://<app_name>.azurewebsites.net/swagger in a browser and play with the Swagger UI.

Rozhraní ASP.NET Core API spuštěné v Azure App Service

Přejděte na adresu http://<app_name>.azurewebsites.net/swagger/v1/swagger.json, kde se zobrazí soubor swagger.json pro vaše nasazené rozhraní API.Navigate to http://<app_name>.azurewebsites.net/swagger/v1/swagger.json to see the swagger.json for your deployed API.

Přejděte na adresu http://<app_name>.azurewebsites.net/api/todo, kde se zobrazí funkční nasazené rozhraní API.Navigate to http://<app_name>.azurewebsites.net/api/todo to see your deployed API working.

Přidání funkcí CORSAdd CORS functionality

Dále pro své rozhraní API povolíte integrovanou podporu CORS v App Service.Next, you enable the built-in CORS support in App Service for your API.

Test CORS v ukázkové aplikaciTest CORS in sample app

V místním úložišti otevřete soubor wwwroot/index.html.In your local repository, open wwwroot/index.html.

Na řádku 51 nastavte proměnnou apiEndpoint na adresu URL vašeho nasazeného rozhraní API (http://<app_name>.azurewebsites.net).In Line 51, set the apiEndpoint variable to the URL of your deployed API (http://<app_name>.azurewebsites.net). Nahraďte <appname> názvem vaší aplikace v App Service.Replace <appname> with your app name in App Service.

V místním okně terminálu znovu spusťte ukázkovou aplikaci.In your local terminal window, run the sample app again.

dotnet run

Přejděte do aplikace v prohlížeči na adrese http://localhost:5000.Navigate to the browser app at http://localhost:5000. Otevřete okno vývojářské nástroje v prohlížeči ( Ctrl + Shift + i v Chrome pro Windows) a prozkoumejte kartu Konzola . Nyní by se měla zobrazit chybová zpráva 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.

Chyba CORS v prohlížeči

Kvůli neshodě domén aplikace v prohlížeči (http://localhost:5000) a vzdáleného prostředku (http://<app_name>.azurewebsites.net) a skutečnosti, že vaše rozhraní API v App Service neodesílá hlavičku Access-Control-Allow-Origin, zabránil váš prohlížeč aplikaci v načtení obsahu z jiné domény.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.

V produkčním prostředí by vaše aplikace v prohlížeči měla místo adresy URL místního hostitele veřejnou adresu URL, ale postup pro povolení CORS pro adresu URL místního hostitele je stejný jako u veřejné adresy 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.

Povolení CORSEnable CORS

V Cloud Shell pomocí příkazu povolte CORS pro adresu URL vašeho klienta az webapp cors add .In the Cloud Shell, enable CORS to your client's URL by using the az webapp cors add command. Nahraďte zástupný symbol _ <>název aplikace_ .Replace the <app-name> placeholder.

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

Ve vlastnosti properties.cors.allowedOrigins můžete nastavit více než jednu adresu URL klienta ("['URL1','URL2',...]").You can set more than one client URL in properties.cors.allowedOrigins ("['URL1','URL2',...]"). Můžete také povolit všechny adresy URL klientů pomocí "['*']".You can also enable all client URLs with "['*']".

Poznámka

Pokud vaše aplikace vyžaduje odeslání přihlašovacích údajů, jako jsou soubory cookie nebo ověřovací tokeny, může prohlížeč vyžadovat ACCESS-CONTROL-ALLOW-CREDENTIALS hlavičku odpovědi.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. Pokud to chcete v App Service povolit, properties.cors.supportCredentials nastavte true v konfiguraci CORS. Tato možnost se nedá povolit allowedOrigins , pokud zahrnuje '*' .To enable this in App Service, set properties.cors.supportCredentials to true in your CORS config. This cannot be enabled when allowedOrigins includes '*'.

Opětovný test CORSTest CORS again

Aktualizujte aplikaci v prohlížeči na adrese http://localhost:5000.Refresh the browser app at http://localhost:5000. Chybová zpráva v okně Console (Konzola) už je pryč a zobrazí se data z nasazeného rozhraní API, se kterými můžete pracovat.The error message in the Console window is now gone, and you can see the data from the deployed API and interact with it. Vaše vzdálené rozhraní API nyní podporuje CORS pro vaši místně spuštěnou aplikaci v prohlížeči.Your remote API now supports CORS to your browser app running locally.

Úspěch CORS v prohlížeči

Blahopřejeme! Teď máte v Azure App Service spuštěné rozhraní API s podporou CORS.Congratulations, you're running an API in Azure App Service with CORS support.

CORS v App Service vs. vlastní CORSApp Service CORS vs. your CORS

Místo CORS v App Service můžete použít vlastní CORS poskytující větší flexibilitu.You can use your own CORS utilities instead of App Service CORS for more flexibility. Například můžete chtít určit různé povolené zdroje pro různé trasy a metody.For example, you may want to specify different allowed origins for different routes or methods. Vzhledem k tomu že CORS v App Service umožňuje zadat jednu sadu povolených zdrojů pro všechny trasy a metody rozhraní API, chtěli byste použít vlastní kód 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. Informace o tom, jak se to dělá v ASP.NET Core, najdete tématu o povolení prostředků různého původů (CORS).See how ASP.NET Core does it at Enabling Cross-Origin Requests (CORS).

Poznámka

Nedoporučujeme používat společně CORS v App Service a vlastní kód CORS.Don't try to use App Service CORS and your own CORS code together. Při společném použití bude mít přednost CORS v App Service a váš vlastní kód CORS nebude mít žádný vliv.When used together, App Service CORS takes precedence and your own CORS code has no effect.

Vyčištění prostředkůClean up resources

V předchozích krocích jste vytvořili prostředky Azure ve skupině prostředků.In the preceding steps, you created Azure resources in a resource group. Pokud předpokládáte, že už tyto prostředky nebudete potřebovat, odstraňte skupinu prostředků spuštěním následujícího příkazu ve službě 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

Spuštění tohoto příkazu může trvat přibližně minut.This command may take a minute to run.

Další krokyNext steps

Naučili jste se:What you learned:

  • Vytvoření prostředků App Service pomocí Azure CLICreate App Service resources using Azure CLI
  • Nasazení rozhraní RESTful API do Azure pomocí GituDeploy a RESTful API to Azure using Git
  • Povolení podpory CORS v App ServiceEnable App Service CORS support

V dalším kurzu se dozvíte, jak ověřovat a autorizovat uživatele.Advance to the next tutorial to learn how to authenticate and authorize users.