CORS Error in FastAPI Backend from React Frontend via APIM

Question

Hi all,

I have a setup with a React frontend App Service and a FastAPI backend App Service on Azure. My goal is to restrict access to the backend so that only the frontend App Service can reach it. However, I encountered a 403 IP forbidden error when trying this approach.

To work around this, I tried using an API Management (APIM) service as a proxy between the frontend and backend. Despite adding the URLs of both the frontend App Service and APIM in the backend's CORS settings, I keep getting CORS errors when accessing the API from the browser. I also configured CORS settings in both the APIM policies and within the FastAPI code.

Notably, this CORS error only occurs when I call the API from the browser; if I make the API call from the SSH terminal in the frontend App Service, it works without issues.

For simplicity, I removed private endpoint restrictions on the backend and changed it to accept all traffic temporarily. I noticed that if I click on the red "message" text, a new tab opens and successfully shows the response from the backend API.

Does anyone have suggestions on how to resolve this CORS error when calling the API from the browser?

Answer 1

Hi KT,

Can you confirm if you have enabled a CORS policy on APIM? If not, you can follow the steps here to do so: https://learn.microsoft.com/en-us/azure/api-management/enable-cors-developer-portal?wt.mc_id=studentamb_271760

Answer 2

Hi @kT,
Thanks for sharing your detailed configuration!
Based on what you've set up, it looks like you've covered most of the things. However, here are a few suggestions that might help resolve the CORS issue when calling the API from the browser:
Remove "*" in allow_origins: Update the allow_origins in FastAPI to only include your frontend and APIM URLs:

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://frontapp.azurewebsites.net", "https://myapim.azure-api.net"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Verify APIM URL: Ensure https://myapim.azure-api.net is the exact URL your frontend is accessing, with correct protocol and no typos.

Check Preflight Response: Use the browser's developer tools to inspect the OPTIONS preflight request. Confirm that Access-Control-Allow-Origin and other CORS headers are returned correctly.

Explicitly Define Headers in APIM Policy: Instead of using <header>*</header>, explicitly specify needed headers like Authorization and Content-Type in <allowed-headers> and <expose-headers>.

Clear Browser Cache: Test in an incognito window or clear the browser cache to avoid cached CORS settings.

Confirm Backend CORS Settings: Ensure any CORS settings in the backend App Service are consistent with your APIM and Fast API configurations.
Let me know for any further assistance.