azure azure-web-app-service azure-virtual-network vnet

Azure N-Tier application architecture not working with App Service Container deployment

I'm developing an application in Azure that needs to have the following requirements:

1 App Service (Docker container) which is the UI and is publicly accessible.
1 App Service (Also Docker Container) which is the API and access from public internet is blocked
The communication needs to go from the UI through the VNET and to the Private endpoint.

(below is an indicative picture how it is currently implemented)

Now I found the exact tutorial on how to do this : https://learn.microsoft.com/en-us/azure/app-service/tutorial-secure-ntier-app and implemented it exactly as is except the app services.

In addition I also set WEBSITE_VNET_ROUTE_ALL and WEBSITE_DNS_SERVER variables.

Now my problem is the following :

[OK] when I navigate to my-api.azurewebsites.net it gives me the correct 403 page (as instructed in the tutorial.
[OK] When I navigate to the UI it is still publicly accessible
[OK] When I ssh into the UI App Service it is able to reach my api with link : my-api.azurewebsites.net

root@f9ce3583a969:/home# wget https://webapp-ntier-api.azurewebsites.net
--2024-09-15 11:17:16--  https://webapp-ntier-api.azurewebsites.net/
Resolving webapp-ntier-api.azurewebsites.net (webapp-ntier-api.azurewebsites.net)... 10.0.1.4
Connecting to webapp-ntier-api.azurewebsites.net (webapp-api-ntier-002.azurewebsites.net)|10.0.1.4|:443... connected.

nslookup correctly resolves to the private link DNS zone and to the assigned ip of 10.0.1.4

nslookup webapp-ntier-api.azurewebsites.net
Server:         127.0.0.11
Address:        127.0.0.11#53

Non-authoritative answer:
webapp-ntier-api.azurewebsites.net  canonical name = webapp-ntier-api.privatelink.azurewebsites.net.
Name:   webapp-ntier-api.privatelink.azurewebsites.net
Address: 10.0.1.4

[FAULT] When I make an API call from the UI to the API's url it gives me a 403 CORS error
[FAULT] I disabled CORS on a chrome level and still got 403
- Failed to load resource: Origin https://x.azurewebsites.net is not allowed by Access-Control-Allow-Origin. Status code: 403

So that implies that the traffic is not going through the azure network but rather publicly.

The only difference in the tutorial is that they use App Services with Code Deployment and I'm using Container deployments.

Only when I go through the API App Service > Networking and enable public network access the API call works.

UI deployment: https://webapp-ntier-ui.azurewebsites.net API deployment https://webapp-ntier-api.azurewebsites.net

Does anyone see a problem with this or knows if there is indeed a difference between docker and code deployments on network level because I've tried a lot of things and none of them seem to do anything

Solution

Jens, please, be aware of different things.

First, it is important to understand that your API must be publicly accesible in order to be able to be reachable from your SPA. Your pages are running in your browser, and you are performing the API call from your browser: there is no way for your browser to interact with your API unless it is publicly accesible.

On the other hand, the CORS error is motivated always for the configuration of your server: your server is the only one that must define the origins that could interact with it. As a consequence, please, be sure that the public URL of your UI is configured as an allowed domain in your server CORS configuration.

Having said that, sometimes you face a CORS error but due to the response received by the Azure load balancers, it is not a true error; again, opening your API probably will solve this problem.

A last word; when I say publicly accesible I don't mean open to the internet: it is a possibility, if you wish, but you can restrict the access to your application to a certain ip ranges by adjusting the firewall rules of your app service. For example, you can temporarily restrict the access to your application from your home.