Oktatóanyag: CORS-támogatással rendelkező RESTful API üzemeltetése az Azure App Service-ben

Cikk
10/24/2023

Az Azure App Service egy hatékonyan méretezhető, önjavító webes üzemeltetési szolgáltatás. Továbbá az App Service beépített támogatást nyújt az Eltérő eredetű erőforrások megosztásához (CORS) a RESTful API-k esetében. Ez az oktatóanyag bemutatja, hogyan telepíthető ASP.NET Core API-alkalmazás az App Service-ben CORS-támogatással. Az alkalmazást parancssori eszközökkel állíthatja be, és a Git használatával helyezheti üzembe.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

App Service-erőforrások létrehozása az Azure CLI-vel
RESTful API üzembe helyezése az Azure-ban a Git használatával
Az App Service CORS-támogatásának engedélyezése

Az oktatóanyag lépései macOS, Linux és Windows rendszerre is vonatkoznak.

Ha nem rendelkezik Azure-előfizetéssel, első lépésként hozzon létre egy ingyenes Azure-fiókot.

Előfeltételek

Az oktatóanyag elvégzéséhez:

Hozzon létre egy helyi ASP.NET Core-alkalmazást.

Ebben a lépésben a helyi ASP.NET Core-projektet állíthatja be. Az App Service támogatja az API-k más nyelven írt azonos munkafolyamatait.

A mintaalkalmazás klónozása

A terminálablakban a cd paranccsal lépjen egy munkakönyvtárra.
Klónozza a mintaadattárat, és váltson az adattár gyökerére.
```
git clone https://github.com/Azure-Samples/dotnet-core-api
cd dotnet-core-api
```
Ez az adattár a következő oktatóanyag alapján létrehozott alkalmazást tartalmaz: Swaggert használó ASP.NET Core webes API-k súgóoldalai. Ez egy Swagger-generátort használ a Swagger felhasználói felület és a Swagger JSON-végpont kiszolgálásához.
Győződjön meg arról, hogy az alapértelmezett ág az main.
```
git branch -m main
```
Tipp.

Az App Service nem követeli meg az ágnév módosítását. Mivel azonban számos adattár módosítja az alapértelmezett ágát main (lásd: Üzembehelyezési ág módosítása), ez az oktatóanyag azt is bemutatja, hogyan helyezhet üzembe adattárat.main

Az alkalmazás futtatása

Futtassa az alábbi parancsokat a szükséges csomagok telepítéséhez, adatbázisok migrálásához és az alkalmazás elindításához.
```
dotnet restore
dotnet run
```
Egy böngészőben nyissa meg a http://localhost:5000/swagger címet a Swagger felhasználói felületének kipróbálásához.
Nyissa meg a http://localhost:5000/api/todo oldalt, és tekintse meg a teendő JSON-elemek listáját.
Nyissa meg a http://localhost:5000 címet, és próbálja ki a böngészőalkalmazást. Később a böngészőalkalmazást egy távoli API-ra irányítja az App Service-ben a CORS-funkciók teszteléséhez. A böngészőalkalmazás kódja az adattár wwwroot könyvtárában található.
Ha bármikor le szeretné állítani az ASP.NET Core-t, nyomja le a Ctrl+C billentyűkombinációt a terminálon.

Azure Cloud Shell

Az Azure által üzemeltetett Azure Cloud Shell egy interaktív felület, amelyet a böngészőből használhat. A Bash vagy a PowerShell segítségével is használhatja a Cloud Shellt az Azure-szolgáltatásokhoz. A Cloud Shell előre telepített parancsaival futtathatja a jelen cikkben szereplő kódot anélkül, hogy bármit telepítenie kellene a helyi környezetben.

Az Azure Cloud Shell indítása:

Lehetőség	Példa/hivatkozás
Válassza a Kipróbálás lehetőséget egy kód vagy parancsblokk jobb felső sarkában. A Kipróbálás lehetőség választása nem másolja automatikusan a kódot vagy a parancsot a Cloud Shellbe.
Látogasson el a https://shell.azure.com webhelyre, vagy kattintson a Cloud Shell indítása gombra a böngészőben.
Az Azure Portal jobb felső sarkában található menüben kattintson a Cloud Shell gombra.

Az Azure Cloud Shell használata:

Indítsa el a Cloud Shellt.
A kód vagy parancs másolásához kattintson a Másolás gombra egy kódblokkon (vagy parancsblokkon).
Illessze be a kódot vagy parancsot a Cloud Shell-munkamenetbe a Windows és Linux rendszeren a Ctrl Shift+V billentyűkombinációval+, vagy a Cmd+Shift+V macOS rendszeren való kiválasztásával.
A kód vagy parancs futtatásához válassza az Enter lehetőséget .

Alkalmazás üzembe helyezése az Azure-ban

Ebben a lépésben üzembe helyezi a .NET Core-alkalmazást az App Service-ben.

A Git helyi üzemelő példányának konfigurálása

Az FTP és a helyi Git üzembe helyezhető egy Azure-webalkalmazásban egy üzembehelyezési felhasználó használatával. Miután konfigurálta az üzembehelyezési felhasználót, az összes Azure-üzembe helyezéshez használhatja. A fiókszintű üzembehelyezési felhasználónév és jelszó eltér az Azure-előfizetés hitelesítő adataitól.

Az üzembe helyezési felhasználó konfigurálásához futtassa az az webapp deployment user set parancsot az Azure Cloud Shellben. Cserélje le <a felhasználónevet> és <a jelszót> egy üzembehelyezési felhasználónevére és jelszavára.

A felhasználónévnek egyedinek kell lennie az Azure-ban, és a helyi Git-leküldések esetében nem tartalmazhat "@" szimbólumot.
A jelszónak legalább nyolc karakter hosszúnak kell lennie, és a következő három elem közül kettőnek kell lennie: betűk, számok és szimbólumok.

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

A JSON-kimenet a jelszót a következőként nulljeleníti meg: . 'Conflict'. Details: 409 hibaüzenet esetén változtassa meg a felhasználónevet. 'Bad Request'. Details: 400 hibaüzenet esetén használjon erősebb jelszót.

Jegyezze fel a webalkalmazások üzembe helyezéséhez használandó felhasználónevet és jelszót.

Erőforráscsoport létrehozása

Az erőforráscsoport egy logikai tároló, amelybe az Azure-erőforrásokat, például webalkalmazásokat, adatbázisokat és tárfiókokat helyezik üzembe és felügyelik. Dönthet úgy is például, hogy később egyetlen egyszerű lépésben törli a teljes erőforráscsoportot.

A Cloud Shellben hozzon létre egy erőforráscsoportot az az group create paranccsal. A következő példában létrehozunk egy myResourceGroup nevű erőforráscsoportot a Nyugat-Európa helyen. Az Ingyenes szintű App Service-t támogató összes hely megtekintéséhez futtassa az az appservice list-locations --sku FREE parancsot.

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

Az erőforráscsoportot és az erőforrásokat általában a közelében található régiókban hozhatja létre.

A parancs befejeződésekor a JSON-kimenet megjeleníti az erőforráscsoport tulajdonságait.

App Service-csomag létrehozása

A Cloud Shellben hozzon létre egy App Service-csomagot az az appservice plan create paranccsal.

Az alábbi példa egy myAppServicePlan nevű App Service-csomag létrehozását mutatja be az INGYENES tarifacsomagban:

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

Az App Service-csomag létrehozása után az Azure CLI az alábbi példához hasonló információkat jelenít meg:

{ 
  "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
}

Webalkalmazás létrehozása

Hozzon létre egy webalkalmazást az myAppServicePlan App Service-csomagban.

A Cloud Shellben használhatja az az webapp create parancsot. A következő példában cserélje ki az <app-name> nevet egy globálisan egyedi névre (érvényes karakterek: a-z, 0-9 és -).

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

A webalkalmazás létrehozása után az Azure CLI az alábbi példához hasonló eredményeket jelenít meg:

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. >
}

Feljegyzés

A távoli Git URL-címe a deploymentLocalGitUrl tulajdonságban látható, a következő formátumban: https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git. Mentse ezt az URL-t, mert később még szüksége lesz rá.

Leküldéses üzenet küldése a Gitből az Azure-ra

Mivel üzembe helyezi az main ágat, be kell állítania az App Service-alkalmazás main alapértelmezett üzembehelyezési ágát (lásd: Üzembehelyezési ág módosítása). A Cloud Shellben állítsa be az DEPLOYMENT_BRANCH alkalmazásbeállítást a az webapp config appsettings set paranccsal.
```
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings DEPLOYMENT_BRANCH='main'
```
A helyi terminálablakba visszatérve adjon hozzá egy távoli Azure-mappát a helyi Git-adattárhoz. Cserélje le <a deploymentLocalGitUrl-from-create-step> elemet a webalkalmazás létrehozásakor mentett Git-távoli git URL-címére.
```
git remote add azure <deploymentLocalGitUrl-from-create-step>
```
A távoli Azure-mappához történő küldéssel helyezze üzembe az alkalmazást a következő paranccsal. Amikor a Git Credential Manager hitelesítő adatok megadását kéri, győződjön meg arról, hogy az Üzembe helyezési felhasználó konfigurálása területen létrehozott hitelesítő adatokat adja meg, nem pedig az Azure Portalra való bejelentkezéshez használt hitelesítő adatokat.
```
git push azure main
```
A parancs futtatása eltarthat néhány percig. Futtatás közben a parancs a következő példához hasonló információkat jelenít meg:

   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

Tallózás az Azure-alkalmazáshoz

Egy böngészőben nyissa meg a http://<app_name>.azurewebsites.net/swagger címet a Swagger felhasználói felületének kipróbálásához.
Lépjen a http://<app_name>.azurewebsites.net/swagger/v1/swagger.json címre az üzembe helyezett API-hoz tartozó swagger.json megtekintéséhez.
A http://<app_name>.azurewebsites.net/api/todo címen megtekintheti az üzembe helyezett API-t működés közben.

CORS-funkció hozzáadása

A következő lépésben engedélyezi az App Service beépített CORS-támogatását az API-hoz.

A CORS tesztelése egy mintaalkalmazásban

A helyi adattárban nyissa meg a wwwroot/index.html fájlt.
Az 51. sorban állítsa be az apiEndpoint változót az üzembe helyezett API URL-címére (http://<app_name>.azurewebsites.net). Cserélje le <az alkalmazásnevet> az App Service-ben az alkalmazás nevére.
A helyi terminálablakban futtassa ismét a mintaalkalmazást.
```
dotnet run
```
Lépjen a http://localhost:5000 helyen lévő böngészőalkalmazáshoz. Nyissa meg a fejlesztői eszközök ablakát a böngészőben (Ctrl+Shifti+a Windows Chrome-ban), és vizsgálja meg a Konzol lapot. Ekkor megjelenik a hibaüzenet. No 'Access-Control-Allow-Origin' header is present on the requested resource

A böngészőalkalmazás (http://localhost:5000) és a távoli erőforrás (http://<app_name>.azurewebsites.net) közötti tartományeltérést a böngésző forrásközi erőforrás-kérésként ismeri fel. Az is tény, hogy az App Service-alkalmazás rest API-ja nem küldi el a Access-Control-Allow-Origin fejlécet, a böngésző megakadályozta a tartományok közötti tartalmak betöltését.

Éles környezetben a böngészőalkalmazás egy nyilvános URL-címmel rendelkezne a localhost URL-cím helyett, de a CORS ugyanúgy engedélyezhető a localhost URL-címeken, mint a nyilvános URL-címeken.

CORS engedélyezése

A Cloud Shellben engedélyezze a CORS-t az ügyfél URL-címéhez az az webapp cors add paranccsal. Cserélje le az <alkalmazásnév> helyőrzőt.

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

Több engedélyezett forrást is hozzáadhat a parancs többszöri futtatásával vagy egy vesszővel elválasztott lista hozzáadásával.--allowed-origins Az összes forrás engedélyezéséhez használja --allowed-origins '*'a következőt: .

A CORS újbóli tesztelése

Frissítse a böngészőalkalmazást a http://localhost:5000 címen. A Konzol ablak hibaüzenete eltűnt, és megjelentek az üzembe helyezett API adatai, amelyeket használhat. A távoli API már támogatja a CORS-t a helyileg futtatott böngészőalkalmazásban.

CORS success in browser client

Gratulálunk, sikeresen beállította az API CORS-támogatással való futtatását az Azure App Service-ben.

Gyakori kérdések

App Service CORS és a CORS
Hogyan helyettesítő karakterek altartományára állítja be az engedélyezett forrásokat?
Hogyan engedélyezi az ACCESS-CONTROL-ALLOW-CREDENTIALS fejlécet a válaszon?

Az App Service-beli és a saját CORS összehasonlítása

A nagyobb rugalmasság érdekében saját CORS-segédprogramjait is használhatja az App Service CORS helyett. Előfordulhat például, hogy másik engedélyezett származási helyet szeretne megadni különböző elérési utakhoz és metódusokhoz. Mivel az App Service CORS lehetővé teszi, hogy minden API elérési úthoz és metódushoz az elfogadott származási helyek egyetlen készletét állítsa be, a saját CORS-kódját érdemes használnia. Az eltérő eredetű kérelmek (CORS) engedélyezését ismertető részben tekintheti meg, hogy működik ez az ASP.NET Core-ban.

A beépített App Service CORS szolgáltatás nem rendelkezik olyan beállításokkal, amelyekkel csak adott HTTP-metódusokat vagy igéket engedélyezhet minden megadott forráshoz. Automatikusan engedélyezi az összes metódust és fejlécet minden meghatározott forráshoz. Ez a viselkedés hasonló a ASP.NET Core CORS-szabályzatokhoz , amikor a beállításokat .AllowAnyHeader() és .AllowAnyMethod() a kódot használja.

Feljegyzés

Ne próbálja együtt használni az App Service CORS-t és a saját CORS-kódját. Együttes használat esetén az App Service CORS az elsődleges, így a saját CORS-kód nem lép érvénybe.

Hogyan helyettesítő karakterek altartományára állítja be az engedélyezett forrásokat?

A helyettesítő karakterek altartománya a *.contoso.com helyettesítő karakterek forrásánál *szigorúbb. Az alkalmazás CORS-felügyeleti oldala azonban az Azure Portalon nem engedélyezi a helyettesítő karakterek altartományának beállítását engedélyezett forrásként. Ezt azonban az Azure CLI-vel teheti meg, például:

az webapp cors add --resource-group <group-name> --name <app-name> --allowed-origins 'https://*.contoso.com'

Hogyan engedélyezi az ACCESS-CONTROL-ALLOW-CREDENTIALS fejlécet a válaszon?

Ha az alkalmazás hitelesítő adatokat, például cookie-kat vagy hitelesítési jogkivonatokat igényel, a böngészőnek szüksége lehet a ACCESS-CONTROL-ALLOW-CREDENTIALS válasz fejlécére. Ha engedélyezni szeretné ezt az App Service-ben, állítsa a következőre properties.cors.supportCredentialstrue: .

az resource update --name web --resource-group <group-name> \
  --namespace Microsoft.Web --resource-type config \
  --parent sites/<app-name> --set properties.cors.supportCredentials=true

Ez a művelet nem engedélyezett, ha az engedélyezett források közé tartozik a helyettesítő karakter.'*' Nem biztonságos konfiguráció megadása AllowAnyOrigin és AllowCredentials megadása, és a helyek közötti kérések hamisítását eredményezheti. A hitelesítő adatok engedélyezéséhez próbálja meg helyettesítő karakterek altartományára cserélni a helyettesítő karakterek forrását.

Az erőforrások eltávolítása

Az előző lépésekben Azure-erőforrásokat hozott létre egy erőforráscsoportban. Ha várhatóan nem lesz szüksége ezekre az erőforrásokra a jövőben, törölje az erőforráscsoportot a következő parancs Cloud Shellben történő futtatásával:

az group delete --name myResourceGroup

A parancs futtatása egy percig is eltarthat.

Következő lépések

Az alábbiak elvégzését ismerte meg:

App Service-erőforrások létrehozása az Azure CLI-vel
RESTful API üzembe helyezése az Azure-ban a Git használatával
Az App Service CORS-támogatásának engedélyezése

A következő oktatóanyag a felhasználók hitelesítését és engedélyezését mutatja be.

Oktatóanyag: Felhasználók teljes körű hitelesítése és engedélyezése