Självstudie: Vara värd för en RESTful-API med CORS i Azure App ServiceTutorial: Host a RESTful API with CORS in Azure App Service

Med Azure App Service får du en automatiskt uppdaterad webbvärdtjänst med hög skalbarhet.Azure App Service provides a highly scalable, self-patching web hosting service. Dessutom har App Service ett inbyggt stöd för CORS (Cross-Origin Resource Sharing) för RESTful-API:er.In addition, App Service has built-in support for Cross-Origin Resource Sharing (CORS) for RESTful APIs. Den här självstudien visar hur du distribuerar en ASP.NET Core API-app till App Service med CORS-stöd.This tutorial shows how to deploy an ASP.NET Core API app to App Service with CORS support. Du konfigurerar appen med hjälp av kommandoradsverktyg och distribuerar appen med Git.You configure the app using command-line tools and deploy the app using Git.

I den här guiden får du lära dig att:In this tutorial, you learn how to:

  • Skapa App Service-resurser med Azure CLICreate App Service resources using Azure CLI
  • Distribuera en RESTful-API till Azure med GitDeploy a RESTful API to Azure using Git
  • Aktivera stöd för CORS i App ServiceEnable App Service CORS support

Du kan följa stegen i den här självstudien i macOS, Linux och Windows.You can follow the steps in this tutorial on macOS, Linux, Windows.

Om du inte har en Azure-prenumeration kan du skapa ettkostnadsfritt konto innan du börjar.If you don't have an Azure subscription, create a free account before you begin.

FörutsättningarPrerequisites

För att slutföra den här kursen behöver du:To complete this tutorial:

Skapa en lokal ASP.NET Core-appCreate local ASP.NET Core app

I det här steget konfigurerar du det lokala ASP.NET Core-projektet.In this step, you set up the local ASP.NET Core project. App Service stöder samma arbetsflöde för API:er som skrivits på andra datorspråk.App Service supports the same workflow for APIs written in other languages.

Klona exempelprogrammetClone the sample application

Använd kommandot cd för att komma till en arbetskatalog i terminalfönstret.In the terminal window, cd to a working directory.

Klona exempellagringsplatsen med följande kommando.Run the following command to clone the sample repository.

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

Den här lagringsplatsen innehåller ett program som baseras på följande självstudie: Hjälpsidor för ASP.NET Cores webb-API med Swagger.This repository contains an app that's created based on the following tutorial: ASP.NET Core Web API help pages using Swagger. En Swagger-generator används för att hantera Swagger-användargränssnittet och Swagger JSON-slutpunkten.It uses a Swagger generator to serve the Swagger UI and the Swagger JSON endpoint.

Köra programmetRun the application

Kör följande kommandon för att installera de nödvändiga paketen, köra databasmigreringar och starta programmet.Run the following commands to install the required packages, run database migrations, and start the application.

cd dotnet-core-api
dotnet restore
dotnet run

Gå till http://localhost:5000/swagger i en webbläsare för att testa användargränssnittet för Swagger.Navigate to http://localhost:5000/swagger in a browser to play with the Swagger UI.

ASP.NET Core-API som körs lokalt

Gå till http://localhost:5000/api/todo och se en lista med ToDo JSON-objekt.Navigate to http://localhost:5000/api/todo and see a list of ToDo JSON items.

Gå till http://localhost:5000 och testa med webbläsarappen.Navigate to http://localhost:5000 and play with the browser app. Senare kommer du att peka med webbläsarappen på en fjärr-API i App Service för att testa CORS-funktionerna.Later, you will point the browser app to a remote API in App Service to test CORS functionality. Koden för webbläsarappen finns i lagringsplatsens katalog wwwroot.Code for the browser app is found in the repository's wwwroot directory.

Du kan när som helst stoppa ASP.NET Core genom att trycka på Ctrl+C i terminalen.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Använda Azure Cloud ShellUse Azure Cloud Shell

Azure-värdar Azure Cloud Shell, en interaktiv gränssnitts miljö som du kan använda via webbläsaren.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Du kan använda antingen bash eller PowerShell med Cloud Shell för att arbeta med Azure-tjänster.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Du kan använda Cloud Shell förinstallerade kommandona för att köra koden i den här artikeln utan att behöva installera något i din lokala miljö.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Starta Azure Cloud Shell:To start Azure Cloud Shell:

AlternativOption Exempel/länkExample/Link
Välj Prova i det övre högra hörnet av ett kodblock.Select Try It in the upper-right corner of a code block. Om du väljer testa kopieras inte koden automatiskt till Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exempel på hur du provar Azure Cloud Shell
Gå till https://shell.azure.com, eller Välj knappen Starta Cloud Shell för att öppna Cloud Shell i webbläsaren.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. starta Cloud Shell i ett nytt fönsterLaunch Cloud Shell in a new window
Välj knappen Cloud Shell på Meny raden längst upp till höger i Azure Portal.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Cloud Shell-knappen i Azure Portal

För att köra koden i den här artikeln i Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Starta Cloud Shell.Start Cloud Shell.

  2. Kopiera koden genom att klicka på kopierings knappen på ett kodblock.Select the Copy button on a code block to copy the code.

  3. Klistra in koden i Cloud Shell-sessionen genom att välja Ctrl+Shift+V på Windows och Linux eller genom att välja cmd+Shift+V på 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. Välj RETUR för att köra koden.Select Enter to run the code.

Distribuera appen till AzureDeploy app to Azure

I det här steget distribuerar du din SQL Database-anslutna .NET Core-app till App Service.In this step, you deploy your SQL Database-connected .NET Core application to App Service.

Konfigurera lokal git-distributionConfigure local git deployment

FTP och lokal Git kan distribuera till en Azure-webbapp med hjälp av en distributionsanvändare.FTP and local Git can deploy to an Azure web app by using a deployment user. När du har konfigurerat din distributionsanvändaren kan du använda det för alla Azure-distributioner.Once you configure your deployment user, you can use it for all your Azure deployments. Ditt distributionen på kontonivån användarnamn och lösenord skiljer sig från autentiseringsuppgifterna för din Azure-prenumeration.Your account-level deployment username and password are different from your Azure subscription credentials.

Om du vill konfigurera distributionsanvändaren, kör den az webapp deployment user set i Azure Cloud Shell.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Ersätt <användarnamn > och <lösenord > med en distribution användarens användarnamn och lösenord.Replace <username> and <password> with a deployment user username and password.

  • Användarnamnet måste vara unikt i Azure och lokal Git push-meddelanden, får inte innehålla den ' @' symbolen.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Lösenordet måste vara minst åtta tecken långt, med två av följande tre element: bokstäver, siffror och symboler.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>

JSON-utdata visar lösenordet som null.The JSON output shows the password as null. Om du ser felet 'Conflict'. Details: 409 ska du byta användarnamn.If you get a 'Conflict'. Details: 409 error, change the username. Om du ser felet 'Bad Request'. Details: 400 ska du använda ett starkare lösenord.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Registrera ditt användarnamn och lösenord för att distribuera dina webbprogram.Record your username and password to use to deploy your web apps.

Skapa en resursgruppCreate a resource group

En resursgrupp är en logisk container som Azure-resurser (t.ex. webbappar, databaser och lagringskonton) distribueras och hanteras i.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Du kan exempelvis välja att ta bort hela resursgruppen i ett enkelt steg längre fram.For example, you can choose to delete the entire resource group in one simple step later.

Skapa i Cloud Shell en resursgrupp med kommandot az group create.In the Cloud Shell, create a resource group with the az group create command. I följande exempel skapas en resursgrupp med namnet myResourceGroup på platsen Europa, västra.The following example creates a resource group named myResourceGroup in the West Europe location. Om du vill se alla platser som stöds för App Service på Kostnadsfri nivå, kör du kommandot 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"

Du skapar vanligtvis din resursgrupp och resurserna i en region nära dig.You generally create your resource group and the resources in a region near you.

När kommandot har slutförts visar JSON-utdata resursgruppens egenskaper.When the command finishes, a JSON output shows you the resource group properties.

Skapa en App Service-planCreate an App Service plan

Skapa i Cloud Shell en App Service-plan med kommandot az appservice plan create.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

I följande exempel skapas en App Service-plan med namnet myAppServicePlan på prisnivån Kostnadsfri: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

När App Service-planen har skapats visas information av Azure CLI. Informationen ser ut ungefär som i följande exempel: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
} 

Skapa en webbappCreate a web app

Skapa en webbapp i myAppServicePlan App Service-planen.Create a web app in the myAppServicePlan App Service plan.

I Cloud Shell kan du använda kommandot az webapp create.In the Cloud Shell, you can use the az webapp create command. Ersätt <app-name> med ett globalt unikt appnamn (giltiga tecken är a-z, 0-9 och -) i följande exempel.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

När webbappen har skapats visar Azure CLI utdata liknande den i följande exempel: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. >
}

Anteckning

URL för fjärransluten Git visas i egenskapen deploymentLocalGitUrl med formatet 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. Spara den här URL:en, eftersom du behöver den senare.Save this URL as you need it later.

Skicka till Azure från GitPush to Azure from Git

I det lokala terminalfönstret lägger du till en Azure-fjärrlagringsplats till din lokala git-lagringsplats.Back in the local terminal window, add an Azure remote to your local Git repository. Ersätt <deploymentLocalGitUrl-from-create-step> med webbadressen för den fjärranslutna Git som du sparade från Skapa en webbapp.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>

Skicka till Azure-fjärrdatabasen för att distribuera appen med följande kommando.Push to the Azure remote to deploy your app with the following command. När git Credential Manager uppmanas att ange autentiseringsuppgifter, se till att du anger de autentiseringsuppgifter som du skapade i Konfigurera en distributions användare, inte de autentiseringsuppgifter som du använder för att logga in på 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

Det kan ett par minuter att köra kommandot.This command may take a few minutes to run. Medan det körs visas information liknande den i följande exempel: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

Bläddra till Azure-appenBrowse to the Azure app

Gå till http://<app_name>.azurewebsites.net/swagger i en webbläsare och testa användargränssnittet för Swagger.Navigate to http://<app_name>.azurewebsites.net/swagger in a browser and play with the Swagger UI.

ASP.NET Core-API som körs i Azure App Service

Gå till http://<app_name>.azurewebsites.net/swagger/v1/swagger.json för att se swagger.json för din distribuerade API.Navigate to http://<app_name>.azurewebsites.net/swagger/v1/swagger.json to see the swagger.json for your deployed API.

Gå till http://<app_name>.azurewebsites.net/api/todo för att se om din distribuerade API fungerar.Navigate to http://<app_name>.azurewebsites.net/api/todo to see your deployed API working.

Lägga till CORS-funktionerAdd CORS functionality

Därefter aktiverar du det inbyggda CORS-stödet i App Service för din API.Next, you enable the built-in CORS support in App Service for your API.

Testa CORS i exempelappenTest CORS in sample app

Öppna wwwroot/index.html på din lokala lagringsplats.In your local repository, open wwwroot/index.html.

På rad 51 anger du apiEndpoint-variabeln till URL:en för din distribuerade 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). Ersätt <appname > med ditt appnamn i App Service.Replace <appname> with your app name in App Service.

Kör exempelappen igen i ditt lokala terminalfönster.In your local terminal window, run the sample app again.

dotnet run

Gå till webbläsarappen på http://localhost:5000.Navigate to the browser app at http://localhost:5000. Öppna fönstret utvecklarverktyg i webbläsaren (Ctrl+Shift+i i Chrome för Windows) och granska fliken konsol . Du bör nu se fel meddelandet 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.

CORS-fel i webbläsarklienten

På grund av domänmatchningsfel mellan webbläsarappen (http://localhost:5000) och fjärresursen (http://<app_name>.azurewebsites.net), samt det faktum att din API i App Service inte skickar Access-Control-Allow-Origin-huvudet, har din webbläsare förhindrat att innehåll från flera domäner blir inlästa i din webbläsarapp.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.

Webbläsarappen bör ha en offentlig URL i stället för en localhost-URL i produktionsmiljö, men sättet att aktivera CORS till en localhost-URL är detsamma som en offentlig 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.

Aktivera CORSEnable CORS

I Cloud Shell aktiverar du CORS till din klient-URL med kommandot az resource update.In the Cloud Shell, enable CORS to your client's URL by using the az resource update command. Ersätt platshållaren <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

Du kan ange fler än en klient-URL i properties.cors.allowedOrigins ("['URL1','URL2',...]").You can set more than one client URL in properties.cors.allowedOrigins ("['URL1','URL2',...]"). Du kan också aktivera alla klient-URL:er med "['*']".You can also enable all client URLs with "['*']".

Anteckning

Om din app kräver att autentiseringsuppgifter såsom cookies eller autentiseringstoken skickas kan webbläsaren kräva huvudet ACCESS-CONTROL-ALLOW-CREDENTIALS i svaret.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. Om du vill aktivera detta i App Service anger du properties.cors.supportCredentials till true i CORS-konfigurationen. Detta kan inte aktive ras när allowedOrigins innehåller '*'.To enable this in App Service, set properties.cors.supportCredentials to true in your CORS config. This cannot be enabled when allowedOrigins includes '*'.

Testa CORS igenTest CORS again

Uppdatera webbläsarappen i http://localhost:5000.Refresh the browser app at http://localhost:5000. Felmeddelandet i fönstret Konsol är nu borta och du kan se data från den distribuerade API:n samt interagera med den.The error message in the Console window is now gone, and you can see the data from the deployed API and interact with it. Fjärr-API:n har nu stöd för CORS i webbläsarappen som körs lokalt.Your remote API now supports CORS to your browser app running locally.

CORS finns nu i webbläsarklienten

Grattis! Du kör en API i Azure App Service med CORS-stöd.Congratulations, you're running an API in Azure App Service with CORS support.

App Services CORS jämfört med din CORSApp Service CORS vs. your CORS

Du kan använda dina egna CORS-verktyg i stället för App Services CORS om du vill ha mer flexibilitet.You can use your own CORS utilities instead of App Service CORS for more flexibility. Du kanske vill ange olika tillåtna ursprung för olika vägar eller metoder.For example, you may want to specify different allowed origins for different routes or methods. Eftersom du med App Services CORS kan ange en uppsättning godkända ursprung för alla API-vägar och metoder, kan du använda din egna CORS-kod.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. Se hur ASP.NET Core gör detta i Aktivera CORS (Cross-Origin Requests).See how ASP.NET Core does it at Enabling Cross-Origin Requests (CORS).

Anteckning

Försök inte att använda App Services CORS och din egen CORS-kod tillsammans.Don't try to use App Service CORS and your own CORS code together. När de används tillsammans har App Services CORS företräde och din egen CORS-kod fyller ingen funktion.When used together, App Service CORS takes precedence and your own CORS code has no effect.

Rensa resurserClean up resources

I de föregående stegen skapade du Azure-resurser i en resursgrupp.In the preceding steps, you created Azure resources in a resource group. Om du inte tror att du behöver dessa resurser i framtiden tar du bort resursgruppen genom att köra följande kommando i 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

Det kan några minuter att köra kommandot.This command may take a minute to run.

Nästa stegNext steps

Vad du lärt dig:What you learned:

  • Skapa App Service-resurser med Azure CLICreate App Service resources using Azure CLI
  • Distribuera en RESTful-API till Azure med GitDeploy a RESTful API to Azure using Git
  • Aktivera stöd för CORS i App ServiceEnable App Service CORS support

Gå vidare till nästa självstudie för att lära dig att autentisera och auktorisera användare.Advance to the next tutorial to learn how to authenticate and authorize users.