How to allow CORS for a webapp with a private endpoint?

Question

I'm running into an issue with CORS related to Azure Virtual Networking. I have setup an azure virtual network with three subnets:

1. WebappFrontend, delegated to Microsoft.Web/serverfarms. Security group with only 2 custom rules, allowing inbound http and https via 80 and 443. No other configuration.
2. WebappBackend, delegated to Microsoft.Web/serverfarms. No NSG.
3. GeneralBackend. Here there is a private endpoint for the WebappBackend.

I made two simple Python flask apps to test, one for frontend and one for backend. Both deployed successfully to the webapps. The backend has a static API endpoint returning a standard message. The frontend has a page that sends a request using python Flask server side request, but also a request via Javascript/CORS.

These are the steps I took to identify the problem:

• When the backend Azure Webapp is set to publicly available under networking, my frontend can reach the backend. Both via CORS as not using CORS.
• When the backend Azure Webapp is set to private under networking, using the private endpoint, my frontend can reach the backend without using CORS. However, when using CORS I get the below error.

'403 Ip Forbidden Access'

'to fetch at 'https://al-webapp-4tg-learning-vnet-backend.azurewebsites.net/api/static' from origin 'https://al-webapp-4tg-learning-vnet-frontend.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.'

I have enabled CORS under API Management settings for the backend webapp. This is also working correctly when the backend webapp is publicly available. The private endpoint also seems to work, because when the backend webapp is private the frontend can reach the normal endpoint without using CORS.

So, to me, the issue seems to lay in the virtual networking private endpoint specifically blocking a request that is using CORS. I can't find anything on how to resolve this issue. I found this related question, but there seems to be no answer https://learn.microsoft.com/en-us/answers/questions/1189604/azure-app-service-react-app-cors-error-in-a-privat .

Thank you in advance for any help!

-------------EDIT-------------

Diving into it deeper I now learned that a CORS request uses the IP address of the machine on which the browser is running. That explains why with server-side API calls (e.g., from a Flask server within the same VNet) the calls succeeds and the CORS request gets a 403 IP forbidden.

What I learned:

• Server-Side Requests: When your frontend server (e.g., Flask app) makes a request to the backend, it's done from within the VNet. Therefore, the backend sees the VNet's IP address or the IP address of the subnet where the frontend server is located.
• Client-Side (CORS) Requests: When a browser makes a CORS request, the request comes from the client (user’s machine), not from the VNet. The backend sees the user's public IP address, not the IP of the VNet or the frontend server.

Now still the question remains how to solve the issue. But I thought this edit might help others.