Azure App Service - React App CORS error in a private endpoint setup

Lakshminarayanan S 10 Reputation points
2023-03-14T19:07:36.2+00:00

I'm hosting a simple webapp setup in Azure which has the following

  • React frontend
  • Node Backend (no database)

Bot the apps are deployed to individual App Services. I've enabled vnet integration for the frontend app and private endpoint for backend app.

The issue is while trying to invoke api call from the react app, I'm getting a CORS (IP Forbidden) error. I've already enabled CORS with * in the node backend. I also tested frontend to backend communication over the private endpoint using the frontend scm console where I even did a curl to the api backend that works like charm.

The issue happens only when I launch the react app from the browser. I've disabled public access on backend app in the portal. I feel somehow the browser is resolving the the backend hostname to it's public ip which is causing this error. Can anyone help resolve this?

Note: I configured the backend url through an env variable in frontend app service which I'm using in the react app.

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
6,875 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. brtrach-MSFT 15,251 Reputation points Microsoft Employee
    2023-03-21T03:31:02.4533333+00:00

    From my understanding, it seems that you are facing a CORS error while trying to invoke an API call from the React app to the Node backend. You have already enabled CORS with * in the Node backend and tested the frontend to backend communication over the private endpoint using the frontend SCM console, which works fine. However, the issue occurs only when you launch the React app from the browser.

    It is possible that the browser is resolving the backend hostname to its public IP, which is causing the error. To resolve this issue, you can try the following steps:

    1. Verify that the backend URL is correctly configured through an environment variable in the frontend app service.
    2. Check if the backend URL is correctly referenced in the React app.
    3. Ensure that the backend app is not accessible from the public network by disabling public access in the Azure portal.
    4. If the issue persists, you can try using a proxy server to resolve the backend hostname to the private IP address.

    I hope these steps will help you resolve the issue. Let me know if you need further assistance.