Öğretici: Azure App Service'de CORS ile RESTful API barındırmaTutorial: Host a RESTful API with CORS in Azure App Service

Azure App Service, yüksek oranda ölçeklenebilen, kendi kendine düzeltme eki uygulayan bir web barındırma hizmeti sunar.Azure App Service provides a highly scalable, self-patching web hosting service. Buna ek olarak, App Service'de RESTful API'ler için yerleşik Çıkış Noktaları Arası Kaynak Paylaşımı (CORS) desteği vardır.In addition, App Service has built-in support for Cross-Origin Resource Sharing (CORS) for RESTful APIs. Bu öğreticide CORS desteğiyle ASP.NET Core API uygulamasının App Service'e nasıl dağıtılacağı gösterilir.This tutorial shows how to deploy an ASP.NET Core API app to App Service with CORS support. Komut satırı araçlarını kullanarak uygulamayı yapılandırır ve Git kullanarak dağıtırsınız.You configure the app using command-line tools and deploy the app using Git.

Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:In this tutorial, you learn how to:

  • Azure CLI kullanarak App Service kaynaklarını oluşturmaCreate App Service resources using Azure CLI
  • Git kullanarak Azure'a RESTful API dağıtımı yapmaDeploy a RESTful API to Azure using Git
  • App Service CORS desteğini etkinleştirmeEnable App Service CORS support

Bu öğreticideki adımları MacOS, Linux ve Windows üzerinde izleyebilirsiniz.You can follow the steps in this tutorial on macOS, Linux, Windows.

Yoksa bir Azure aboneliği, oluşturun bir ücretsiz bir hesap başlamadan önce.If you don't have an Azure subscription, create a free account before you begin.

ÖnkoşullarPrerequisites

Bu öğreticiyi tamamlamak için:To complete this tutorial:

Yerel ASP.NET Core uygulaması oluşturmaCreate local ASP.NET Core app

Bu adımda, yerel ASP.NET Core projesini ayarlarsınız.In this step, you set up the local ASP.NET Core project. App Service API'ler için diğer dillerde yazılmış aynı iş akışını destekler.App Service supports the same workflow for APIs written in other languages.

Örnek uygulamayı kopyalamaClone the sample application

Terminal penceresinde, cd ile bir çalışma dizinine gidin.In the terminal window, cd to a working directory.

Örnek depoyu kopyalamak için aşağıdaki komutu çalıştırın.Run the following command to clone the sample repository.

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

Bu depo şu öğreticiye temel alan oluşturulan bir uygulamayı içerir: Swagger kullanan ASP.NET Core Web API Yardım sayfaları.This repository contains an app that's created based on the following tutorial: ASP.NET Core Web API help pages using Swagger. Swagger kullanıcı arabirimine ve Swagger JSON uç notasına hizmet vermek için bir Swagger oluşturucusu kullanır.It uses a Swagger generator to serve the Swagger UI and the Swagger JSON endpoint.

Uygulamayı çalıştırmaRun the application

Gerekli paketleri yüklemek, veritabanı geçişlerini çalıştırmak ve uygulamayı başlatmak için aşağıdaki komutları çalıştırın.Run the following commands to install the required packages, run database migrations, and start the application.

cd dotnet-core-api
dotnet restore
dotnet run

Swagger kullanıcı arabirimiyle çalışmak için tarayıcıda http://localhost:5000/swagger adresine gidin.Navigate to http://localhost:5000/swagger in a browser to play with the Swagger UI.

Yerel olarak çalışan ASP.NET Core API'si

http://localhost:5000/api/todo adresine gidin ve ToDo JSON öğelerinin listesine bakın.Navigate to http://localhost:5000/api/todo and see a list of ToDo JSON items.

http://localhost:5000 adresine gidin ve tarayıcı uygulamasıyla çalışın.Navigate to http://localhost:5000 and play with the browser app. Daha sonra CORS işlevselliğini test etmek için tarayıcı uygulamasının App Service'te bir uzak API'ye işaret etmesini sağlayacaksınız.Later, you will point the browser app to a remote API in App Service to test CORS functionality. Tarayıcı uygulamasının kodu deponun wwwroot dizininde bulunabilir.Code for the browser app is found in the repository's wwwroot directory.

ASP.NET Core’u dilediğiniz zaman durdurmak için, terminalde Ctrl+C tuşlarına basın.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Azure Cloud Shell’i açmaOpen Azure Cloud Shell

Azure Cloud Shell, göz atabilirsiniz kullanılan ve Azure'da barındırılan bir etkileşimli Kabuk ortamıdır.Azure Cloud Shell is an interactive shell environment hosted in Azure and used through your browse. Azure Cloud Shell ya da kullanmanızı sağlar bash veya PowerShell Kabukları çeşitli Azure Hizmetleri ile çalışmak için araçları çalıştırmak için.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, bu makalenin içeriğini yerel ortamınızda herhangi bir yükleme gerekmeden çalıştırmanıza izin için komutları ile önceden yüklenmiş olarak sunulur.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.

Bu makalede Azure Cloud Shell içinde yer alan herhangi bir kodu çalıştırmak için Cloud Shell oturumu açın, kullanmak kopyalama düğmesi kodu kopyalayıp Cloud shell'e oturumla yapıştırın için bir kod bloğu üzerinde Ctrl + Shift + V üzerinde Windows ve Linux veya Cmd + Shift + V macOS üzerinde.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. Yapıştırılan metni otomatik olarak yürütülmedi, bu nedenle basın Enter kodu çalıştırmak için.Pasted text is not automatically executed, so press Enter to run code.

Azure Cloud Shell ile yeniden başlatabilirsiniz:You can launch Azure Cloud Shell with:

SeçenekOption Örnek/bağlantıExample/Link
Kod bloğunun sağ üst köşesindeki Deneyin’i seçin.Select Try It in the upper-right corner of a code block. Bu değil otomatik olarak Cloud shell'e metni kopyalayın.This doesn't automatically copy text to Cloud Shell. Örneği Azure Cloud Shell için deneyin
Açık Azure Cloud Shell tarayıcınızda.Open Azure Cloud Shell in your browser. <a href="https://shell.azure.com" title="Azure Cloud Shell'i Başlat
Azure portalının sağ üst köşesindeki menüde yer alan Cloud Shell düğmesini seçin.Select the Cloud Shell button on the menu in the upper-right corner of the Azure portal. Azure portaldaki Cloud Shell düğmesi

Uygulamayı Azure’da dağıtmaDeploy app to Azure

Bu adımda, SQL Veritabanı’na bağlı .NET Core uygulamanızı App Service’e dağıtırsınız.In this step, you deploy your SQL Database-connected .NET Core application to App Service.

Yerel git dağıtımını yapılandırmaConfigure local git deployment

Dağıtım kimlik bilgileri Azure Cloud Shell'de yapılandırma az webapp deployment user set komutu.In the Azure Cloud Shell, configure deployment credentials with the az webapp deployment user set command. FTP ve yerel Git dağıtımını web uygulamasında bu dağıtım kullanıcısını kullanın.You use this deployment user for FTP and local Git deployment to a web app. Kullanıcı adı ve parola, hesap düzeyindedir.The username and password are account level. Bunlar, Azure aboneliği kimlik bilgilerinizden farklı.They're different from your Azure subscription credentials.

Aşağıdaki örnekte, değiştirin <kullanıcıadı > ve <parola > , yeni kullanıcı adı ve parola köşeli ayraçlar dahil.In the following example, replace <username> and <password>, including the brackets, with a new username and password. Kullanıcı adı Azure içinde benzersiz olmalıdır.The username must be unique within Azure. Parola en az sekiz karakter uzunluğunda olmalı, şu üç öğeyi sahip olmalıdır: harf, rakam ve semboller.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>

Olarak gösterilen parolayla bir JSON çıkışı size null.You get a JSON output with the password shown as null. 'Conflict'. Details: 409 hatası alırsanız kullanıcı adını değiştirin.If you get a 'Conflict'. Details: 409 error, change the username. 'Bad Request'. Details: 400 hatası alırsanız daha güçlü bir parola kullanın.If you get a 'Bad Request'. Details: 400 error, use a stronger password. Dağıtım kullanıcı adı değil içermelidir ' @' yerel Git gönderim için simge.The deployment username must not contain ‘@’ symbol for local Git pushes.

Bu dağıtım kullanıcısını yalnızca bir kez yapılandırın.You configure this deployment user only once. Tüm Azure dağıtımlarınız için kullanabilirsiniz.You can use it for all your Azure deployments.

Not

Kullanıcı adı ve parolayı kaydedin.Record the username and password. Daha sonra web uygulamasının dağıtımı için bunlara ihtiyacınız olacaktır.You need them to deploy the web app later.

Kaynak grubu oluşturunCreate a resource group

Kaynak grubu web uygulamaları, veritabanları ve depolama hesapları gibi Azure kaynaklarının dağıtıldığı ve yönetildiği bir mantıksal kapsayıcıdır.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Örneğin, daha sonra tek bir basit adımda kaynak grubun tamamını silmeyi seçebilirsiniz.For example, you can choose to delete the entire resource group in one simple step later.

Cloud Shell içinde az group create komutuyla bir kaynak grubu oluşturun.In the Cloud Shell, create a resource group with the az group create command. Aşağıdaki örnek Batı Avrupa konumunda myResourceGroup adlı bir kaynak grubu oluşturur.The following example creates a resource group named myResourceGroup in the West Europe location. Ücretsiz katmanda App Service için desteklenen tüm konumları görüntülemek için az appservice list-locations --sku FREE komutunu çalıştırın.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"

Genellikle kaynak grubunuzu ve kaynakları kendinize yakın bir bölgede oluşturursunuz.You generally create your resource group and the resources in a region near you.

Komut tamamlandığında, bir JSON çıkışı size kaynak grubu özelliklerini gösterir.When the command finishes, a JSON output shows you the resource group properties.

App Service planı oluşturmaCreate an App Service plan

Cloud Shell’de, az appservice plan create komutuyla bir App Service planı oluşturun.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

Aşağıdaki örnekte, Ücretsiz fiyatlandırma katmanı kullanılarak myAppServicePlan adlı bir App Service planı oluşturulmaktadır: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

App Service planı oluşturulduğunda Azure CLI, aşağıdaki örneğe benzer bilgiler gösterir: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
} 

Web uygulaması oluşturunCreate a web app

myAppServicePlan App Service planında bir web uygulaması oluşturun.Create a web app in the myAppServicePlan App Service plan.

Cloud Shell'de, az webapp create komutunu kullanabilirsiniz.In the Cloud Shell, you can use the az webapp create command. Aşağıdaki örnekte <app-name> kısmını genel olarak benzersiz bir uygulama adıyla değiştirin (geçerli karakterler a-z, 0-9 ve - şeklindedir).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

Web uygulaması oluşturulduğunda Azure CLI aşağıda yer alan çıktıdaki gibi bilgiler gösterir: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. >
}

Not

Git uzak URL’si deploymentLocalGitUrl özelliği içinde https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git biçiminde gösterilir.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. Bu URL’ye daha sonra ihtiyacınız olacağı için URL’yi kaydedin.Save this URL as you need it later.

Git üzerinden Azure'a göndermePush to Azure from Git

Yerel terminal penceresine dönüp yerel Git deponuza bir Azure uzak deposu ekleyin.Back in the local terminal window, add an Azure remote to your local Git repository. <deploymentLocalGitUrl-from-create-step> değerini Web uygulaması oluşturma bölümünde kaydettiğiniz Git uzak URL’si ile değiştirin.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>

Aşağıdaki komutla uygulamanızı dağıtmak için Azure uzak deposuna gönderin.Push to the Azure remote to deploy your app with the following command. Git kimlik bilgisi Yöneticisi kimlik bilgileri istendiğinde, Azure portalında oturum açmak için kullandığınız kimlik bilgilerini değil bir dağıtım kullanıcısı Yapılandır oluşturduğunuz kimlik bilgilerini girdiğinizden emin olun.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

Bu komutun çalıştırılması birkaç dakika sürebilir.This command may take a few minutes to run. Çalıştırıldığında, aşağıdaki örneğe benzer bilgiler görüntüler: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

Azure uygulamasına göz atmaBrowse to the Azure app

Tarayıcıda http://<app_name>.azurewebsites.net/swagger adresine gidin ve Swagger kullanıcı arabirimiyle çalışın.Navigate to http://<app_name>.azurewebsites.net/swagger in a browser and play with the Swagger UI.

Azure App Service'te çalışan ASP.NET Core API'si

Dağıtılan API'nizin swagger.json dosyasını görmek için http://<app_name>.azurewebsites.net/swagger/v1/swagger.json adresine gidin.Navigate to http://<app_name>.azurewebsites.net/swagger/v1/swagger.json to see the swagger.json for your deployed API.

Dağıtılan API'nizin çalıştığını görmek için http://<app_name>.azurewebsites.net/api/todo adresine gidin.Navigate to http://<app_name>.azurewebsites.net/api/todo to see your deployed API working.

CORS işlevselliği eklemeAdd CORS functionality

Ardından, API'niz için App Service'te yerleşik CORS desteğini etkinleştirirsiniz.Next, you enable the built-in CORS support in App Service for your API.

Örnek uygulamada CORS'yi test etmeTest CORS in sample app

Yerel deponuzda wwwroot/index.html dosyasını açın.In your local repository, open wwwroot/index.html.

51. satırda, apiEndpoint değişkenini dağıtılan API'nizin URL'sine (http://<app_name>.azurewebsites.net) ayarlayın.In Line 51, set the apiEndpoint variable to the URL of your deployed API (http://<app_name>.azurewebsites.net). <appname> değerini App Service'teki uygulamanızın adıyla değiştirin.Replace <appname> with your app name in App Service.

Yerel terminal pencerenizde örnek uygulamayı yeniden çalıştırın.In your local terminal window, run the sample app again.

dotnet run

http://localhost:5000 adresindeki tarayıcı uygulamasına gidin.Navigate to the browser app at http://localhost:5000. Tarayıcınızda geliştirici araçları penceresini açın (Windows için Chrome'da Ctrl+Shift+i) ve Konsol sekmesini inceleyin. Artık şu hata iletisini görüyor olmalısınız: 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.

Tarayıcı istemcisinde CORS hatası

Tarayıcı uygulaması (http://localhost:5000) ile uzak kaynak (http://<app_name>.azurewebsites.net) arasındaki etki alanı uyuşmazlığından ve App Service'deki API'nizin Access-Control-Allow-Origin üst bilgisi göndermemesinden dolayı, tarayıcınız etki alanları arası içeriğin tarayıcı uygulamanıza yüklenmesini engelledi.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.

Üretim ortamında, tarayıcı uygulamanızın localhost URL değeri yerine genel URL'si olabilir, ama localhost URL'ye CORS etkinleştirmesi genel URL ile aynıdır.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.

CORS'yi etkinleştirmeEnable CORS

Cloud Shell'de, az resource update komutunu kullanarak istemcinizin URL'sinde CORS'yi etkinleştirin.In the Cloud Shell, enable CORS to your client's URL by using the az resource update command. <appname> yer tutucusunu değiştirin.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

properties.cors.allowedOrigins içinde birden çok istemci URL'si belirtebilirsiniz ("['URL1','URL2',...]").You can set more than one client URL in properties.cors.allowedOrigins ("['URL1','URL2',...]"). Ayrıca "['*']" ile tüm istemci URL'lerini etkinleştirebilirsiniz.You can also enable all client URLs with "['*']".

Not

Uygulamanızı tanımlama veya kimlik doğrulama belirteçlerinizi gönderilecek gibi kimlik bilgileri gerektiriyorsa, tarayıcı gerektirebilir ACCESS-CONTROL-ALLOW-CREDENTIALS yanıtı üstbilgisi.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. App Service'te etkinleştirmek için ayarlamak properties.cors.supportCredentials için true , CORS yapılandırmasını. Bu olamaz etkin allowedOrigins içerir '*'.To enable this in App Service, set properties.cors.supportCredentials to true in your CORS config. This cannot be enabled when allowedOrigins includes '*'.

CORS'yi yeniden test etmeTest CORS again

http://localhost:5000 adresindeki tarayıcı uygulamasını yenileyin.Refresh the browser app at http://localhost:5000. Konsol penceresindeki hata iletisi artık kaldırılır; dağıtılan API'den verileri görebilir ve etkileşimli çalışabilirsiniz.The error message in the Console window is now gone, and you can see the data from the deployed API and interact with it. Uzak API'niz artık yerel olarak çalıştırılan tarayıcı uygulamanıza CORS'yi destekler.Your remote API now supports CORS to your browser app running locally.

Tarayıcı istemcisinde CORS başarılı

Tebrikler, Azure App Service'te CORS destekli bir API çalıştırıyorsunuz.Congratulations, you're running an API in Azure App Service with CORS support.

App Service CORS'si ile sizin CORS'nizApp Service CORS vs. your CORS

Daha fazla esneklik elde etmek için App Service CORS'si yerine kendi CORS yardımcı programlarınızı kullanabilirsiniz.You can use your own CORS utilities instead of App Service CORS for more flexibility. Örneğin, farklı yollar veya yöntemler için izin verilen farklı çıkış noktaları belirtmek isteyebilirsiniz.For example, you may want to specify different allowed origins for different routes or methods. App Service CORS'si tüm API yolları ve yöntemleri için tek bir izin verilen çıkış noktaları kümesi belirtmenize olanak tanıdığından, kendi CORS kodunuzu kullanmak isteyebilirsiniz.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. Çıkış Noktaları Arası İstekleri Etkinleştirme (CORS) konusunda, ASP.NET Core'un bunu nasıl yaptığını görebilirsiniz.See how ASP.NET Core does it at Enabling Cross-Origin Requests (CORS).

Not

App Service CORS'si ile kendi CORS kodunuzu birlikte kullanmaya çalışmayın.Don't try to use App Service CORS and your own CORS code together. Birlikte kullanıldıklarında, App Service CORS'si öncelikli olur ve kendi CORS kodunuzun hiçbir etkisi olmaz.When used together, App Service CORS takes precedence and your own CORS code has no effect.

Kaynakları temizlemeClean up resources

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz.In the preceding steps, you created Azure resources in a resource group. Bu kaynakların gelecekte gerekli olacağını düşünmüyorsanız, Cloud Shell’de aşağıdaki komutu çalıştırarak kaynak grubunu silin: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

Bu komutun çalıştırılması bir dakika sürebilir.This command may take a minute to run.

Sonraki adımlarNext steps

Öğrendikleriniz:What you learned:

  • Azure CLI kullanarak App Service kaynaklarını oluşturmaCreate App Service resources using Azure CLI
  • Git kullanarak Azure'a RESTful API dağıtımı yapmaDeploy a RESTful API to Azure using Git
  • App Service CORS desteğini etkinleştirmeEnable App Service CORS support

Kullanıcıların kimlik doğrulamasının ve yetkilendirmesinin nasıl yapılacağını öğrenmek için sonraki öğreticiye ilerleyin.Advance to the next tutorial to learn how to authenticate and authorize users.