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?

JimbobTheSailor · Accepted Answer · 2023-07-18 08:36:38Z

2

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)

answered Jul 18, 2023 at 8:36

JimbobTheSailor

1,7631 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Azure static web app. CORS issue when calling app api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related