You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# Tutorial: Host a RESTful API with CORS in Azure App Service
16
16
17
-
[Azure App Service](overview.md) provides a highly scalable self-patching web hosting service. In addition, App Service has built-in support for [cross-origin resource sharing (CORS)](https://wikipedia.org/wiki/Cross-Origin_Resource_Sharing) for RESTful APIs. This tutorial shows how to deploy an ASP.NET Core API app to App Service with CORS support. You configure the app using command-line tools and deploy the app using Git.
17
+
[Azure App Service](overview.md) provides a highly scalable self-patching web hosting service. In addition, App Service has built-in support for [cross-origin resource sharing (CORS)](https://wikipedia.org/wiki/Cross-Origin_Resource_Sharing) for RESTful APIs. This tutorial shows how to deploy an ASP.NET Core API app to App Service with CORS support. You configure the app by using command-line tools and deploy the app by using Git.
18
18
19
19
In this tutorial, you learn how to:
20
20
21
21
> [!div class="checklist"]
22
-
> * Create App Service resources using Azure CLI.
23
-
> * Deploy a RESTful API to Azure using Git.
22
+
> * Create App Service resources by the using the Azure CLI.
23
+
> * Deploy a RESTful API to Azure by using Git.
24
24
> * Enable App Service CORS support.
25
25
26
26
You can complete this tutorial on macOS, Linux, or Windows.
@@ -47,7 +47,7 @@ In this step, you set up the local ASP.NET Core project. App Service supports th
47
47
cd dotnet-core-api
48
48
```
49
49
50
-
This repository contains an app that's created based on the tutorial [ASP.NET Core web API documentation with Swagger / OpenAPI](/aspnet/core/tutorials/web-api-help-pages-using-swagger?tabs=visual-studio). It uses a Swagger generator to serve the [Swagger UI](https://swagger.io/swagger-ui/) and the Swagger JSON endpoint.
50
+
This repository contains an app that's based on the tutorial [ASP.NET Core web API documentation with Swagger / OpenAPI](/aspnet/core/tutorials/web-api-help-pages-using-swagger?tabs=visual-studio). It uses a Swagger generator to serve the [Swagger UI](https://swagger.io/swagger-ui/) and the Swagger JSON endpoint.
51
51
52
52
1. Make sure the default branch is `main`.
53
53
@@ -56,7 +56,7 @@ In this step, you set up the local ASP.NET Core project. App Service supports th
56
56
```
57
57
58
58
> [!TIP]
59
-
> The branch name change isn't required by App Service. However, since many repositories are changing their default branch to `main` (see [Change deployment branch](deploy-local-git.md#change-deployment-branch)), this tutorial shows you how to deploy a repository from `main`.
59
+
> The branch name change isn't required by App Service. However, because many repositories are changing their default branch to `main` (see [Change deployment branch](deploy-local-git.md#change-deployment-branch)), this tutorial shows how to deploy a repository from `main`.
60
60
61
61
### Run the application
62
62
@@ -67,13 +67,13 @@ In this step, you set up the local ASP.NET Core project. App Service supports th
67
67
dotnet run
68
68
```
69
69
70
-
1. Navigate to `http://localhost:5000/swagger`in a browser to try the Swagger UI.
70
+
1. Go to `http://localhost:5000/swagger`in a browser to try the Swagger UI.
71
71
72
72

73
73
74
-
1. Navigate to `http://localhost:5000/api/todo` to see a list of ToDo JSON items.
74
+
1. Go to `http://localhost:5000/api/todo` to see a list of ToDo JSON items.
75
75
76
-
1. Navigate to `http://localhost:5000` and experiment with the browser app. Later, you'll point the browser app to a remote API in App Service to test CORS functionality. Code for the browser app is found in the repository's _wwwroot_ directory.
76
+
1. Go to `http://localhost:5000` and experiment with the browser app. Later, you'll point the browser app to a remote API in App Service to test CORS functionality. Code for the browser app is found in the repository's _wwwroot_ directory.
77
77
78
78
1. To stop ASP.NET Core at any time, select**Ctrl+C**in the terminal.
79
79
@@ -132,13 +132,13 @@ In this step, you deploy your .NET Core application to App Service.
132
132
133
133
### Browse to the Azure app
134
134
135
-
1. Navigate to `http://<app_name>.azurewebsites.net/swagger`in a browser and view the Swagger UI.
135
+
1. Go to `http://<app_name>.azurewebsites.net/swagger`in a browser and view the Swagger UI.
136
136
137
137

138
138
139
-
1. Navigate to `http://<app_name>.azurewebsites.net/swagger/v1/swagger.json` to see the _swagger.json_ for your deployed API.
139
+
1. Go to `http://<app_name>.azurewebsites.net/swagger/v1/swagger.json` to see the _swagger.json_ for your deployed API.
140
140
141
-
1. Navigate to `http://<app_name>.azurewebsites.net/api/todo` to see your deployed API working.
141
+
1. Go to `http://<app_name>.azurewebsites.net/api/todo` to see your deployed API working.
142
142
143
143
## Add CORS functionality
144
144
@@ -148,15 +148,15 @@ Next, you enable the built-in CORS support in App Service for your API.
148
148
149
149
1. In your local repository, open _wwwroot/index.html_.
150
150
151
-
1. On line 51, set the `apiEndpoint` variable to the URL of your deployed API (`http://<app_name>.azurewebsites.net`). Replace _\<appname>_ with your app namein App Service.
151
+
1. On line 51, set the `apiEndpoint` variable to the URL of your deployed API (`http://<app_name>.azurewebsites.net`). Replace _\<appname>_ with your app name.
152
152
153
153
1. In your local terminal window, run the sample app again.
154
154
155
155
```bash
156
156
dotnet run
157
157
```
158
158
159
-
1. Navigate to the browser app at `http://localhost:5000`. 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`.
159
+
1. Go to the browser app at `http://localhost:5000`. 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`.
160
160
161
161

162
162
@@ -190,9 +190,9 @@ Congratulations, you're running an API in Azure App Service with CORS support.
190
190
191
191
#### App Service CORS vs. your CORS
192
192
193
-
You can use your own CORS utilities instead of App Service CORS for more flexibility. For example, you might want to specify different allowed origins for different routes or methods. Since App Service CORS lets you specify only one set of accepted origins for all API routes and methods, you would want to use your own CORS code. See how CORS is enabled in ASP.NET Core at [Enable CORS](/aspnet/core/security/cors).
193
+
To get more flexibility, you can use your own CORS utilities instead of App Service CORS. For example, you might want to specify different allowed origins for different routes or methods. Because App Service CORS lets you specify only one set of accepted origins for all API routes and methods, you would need to use your own CORS code. To learn how to enable CORS in ASP.NET Core, see [Enable CORS](/aspnet/core/security/cors).
194
194
195
-
The built-in App Service CORS feature doesn't have options to allow only specific HTTP methods or verbs foreach origin that you specify. It will automatically allow all methods and headers for each origin defined. This behavior is similar to [ASP.NET Core CORS](/aspnet/core/security/cors) policies when you use the options `.AllowAnyHeader()` and `.AllowAnyMethod()`in the code.
195
+
The built-in App Service CORS feature doesn't have options to allow only specific HTTP methods or verbs foreach origin that you specify. It automatically allows all methods and headers for each origin defined. This behavior is similar to [ASP.NET Core CORS](/aspnet/core/security/cors) policies when you use the options `.AllowAnyHeader()` and `.AllowAnyMethod()`in the code.
196
196
197
197
> [!NOTE]
198
198
> Don't try to use App Service CORS and your own CORS code together. If you try to use them together, App Service CORS takes precedence and your own CORS code has no effect.
@@ -201,7 +201,7 @@ The built-in App Service CORS feature doesn't have options to allow only specifi
201
201
202
202
#### How do I set allowed origins to a wildcard subdomain?
203
203
204
-
A wildcard subdomain like `*.contoso.com` is more restrictive than the wildcard origin `*`. The app's CORS management page in the Azure portal doesn't let you set a wildcard subdomain as an allowed origin. However, you can do that by using Azure CLI, like so:
204
+
A wildcard subdomain like `*.contoso.com` is more restrictive than the wildcard origin `*`. The app's CORS management page in the Azure portal doesn't let you set a wildcard subdomain as an allowed origin. However, you can do that by using the Azure CLI:
205
205
206
206
```azurecli-interactive
207
207
az webapp cors add --resource-group <group-name> --name <app-name> --allowed-origins 'https://*.contoso.com'
@@ -222,16 +222,16 @@ This operation isn't allowed when allowed origins include the wildcard origin `'
0 commit comments