App GW + storage account static website + app service backend api

Question

Dear, I'm trying to restrict access to allow only an App GW to access to a public app service. The architecture is as describe below: App GW (Public IP) <--> Storage Account (static website enabled) <--> App Service Use case: The App GW have a backend pool pointing to the storage account fqdn. As shown below, the storage account can only be accessed by the App GW subnet. A static website ( let's say the frontend) is hosted on the storage account and make GET requests to the App Service (let's say the backend). The aim is to allow access to the app service backend only by the public ip address of the App GW but with the network restrictions configured this is not working and we are facing the following errors in the console: ![168696-corserrors.jpg][1] Strange things because the cors policy on the app service backend is set to allow all (*) and the php code on the backend have the following : header("Access-Control-Allow-Origin: *"); Storage account specs: -![168708-spec1.jpg][2] ![168781-spec2.jpg][3] App service spec: ![168695-cors.jpg][4] ![168735-restr.jpg][5] [1]: /api/attachments/168696-corserrors.jpg?platform=QnA [2]: /api/attachments/168708-spec1.jpg?platform=QnA [3]: /api/attachments/168781-spec2.jpg?platform=QnA [4]: /api/attachments/168695-cors.jpg?platform=QnA [5]: /api/attachments/168735-restr.jpg?platform=QnA This is very frustrating as i'm trying to make it works since long time and found nothing in the doc related to that behavior. So any help of the community would be appreciated ! Many thanks at all for your help !

Answer 1

Additionally, -If your requirement fits, you could look at ILB ASE. The deployment of the App Service Environment with an internal endpoint is called an internal load balancer (ILB) App Service environment (ASE).

If you haven't done, you may review logs/metrics to narrow the issue further - Troubleshoot using metrics - metrics that can indicate issues either at Application Gateway or the backend.

--- Review the architectures Access-restriction-rules-based-on-service-endpoints and leverage as per your needs.

• Configure App Service with Application Gateway and integrate-with-application-gateway for config settings.

Answer 2

Dear, Thanks for your answer but the storage account cors are also configured to * as shown below: ![168840-sacors.jpg][1] [1]: /api/attachments/168840-sacors.jpg?platform=QnA I don't have any other idea to make it works :( !

Answer 3

It is recommended not to use App Service CORS and your own CORS code together. When used together, App Service CORS takes precedence and your own CORS code has no effect.

Cross-Origin Resource Sharing (CORS) support for Azure Storage is not supported with static website.

Just to highlight, since app service is a multi-tenant service instead of a dedicated deployment, it uses host header in the incoming request to resolve the request to the correct app service endpoint. Usually, the DNS name of the application, which in turn is the DNS name associated with the application gateway fronting the app service, is different from the domain name of the backend app service.

As far as options for your app architecture, by using VNet Integration to connect your front-end web app to a subnet in a virtual network, which enables your web app to make calls into your virtual network.

1.Expose your API application by using private endpoints in your virtual network.
2.Use service endpoints to ensure inbound traffic to your API app comes only from the subnet used by your front-end web app.

• Kindly let us know, we may need additional App and sub info to investigate this issue further.