Azure static web app. CORS issue when calling app api

Question

I've got an Azure static web app, with a Vue3 frontend and fastapi backend.

The fastapi api is up an running works at https://xxxxxxxxxxx-xxxxxxxx.3.azurestaticapps.net/api

The vue app works at https://xxxxxxxxxxx-xxxxxxxx.3.azurestaticapps.net/#

Now, when the vue app calls const resp = await axios.get("/api"), there is redirect to azurewebsites.net that causes a CORS block.

From the browser console :

Access to XMLHttpRequest at 'https://xxxxxx-xxxxx-xxxxxx-xxxx-xxxxxxxx.azurewebsites.net/api/' (redirected from 'https://xxxxxxxxxxx-xxxxxxxx.3.azurestaticapps.net/api') from origin 'https://xxxxxxxxxxx-xxxxxxxx.3.azurestaticapps.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any thoughts on how to solve this?

Answer 1

You need to configure your API (fastapi) in Azure to permit your client to connect with it (vue app). Key is that it is the server that is configured to allow clients from different origins to access it.

In Azure, go to App Services, and slect your API app (fastapi)

Scroll down the big list of menus to find 'CORS'

Then add the url of your all resources that the API will permit a connection from, which in your case is https://xxxxxxxxxxx-xxxxxxxx.3.azurestaticapps.net ( I note you have a third domain 'azurewebsites.net' involved, you may need to add that too)