Blocked by CORS policy : Calling Azure Static Web App Azure Funcion from Browser

Question

I've an Azure Function inside Azure Static Web App to fetch the Static Web App's Application Settings. While calling the Http Triggered Function URL through Code, from browser I'm getting -

"Access to fetch at 'https://agreeable-rock-0ba5f3a10.1.azurestaticapps.net/' from origin 'http://localhost:44388' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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".

My Http Triggered Function Code Here -
https://i.stack.imgur.com/ck2LD.png

My HttpClient Call to Function-
https://i.stack.imgur.com/Ktdrk.png

2 Projects I have. 1) Client is a MAUI App. 2) Azure Function. I've deployed Function as /Api in AzureStaticWebApp & Trying to access Application Settings from Client. Directly calling the FunctionURL from Postman, I'm able to get the Application Settings but not from Localhost-Browser.

Thanks in Advance

Answer 1

@Soumik Mukhopadhyay , Following-up from my comments on your SO thread.

The Azure Function API linked to the Static Web App has CORS enabled to only allow requests originating from the Azure Static Web App domain for security purposes. As such, it would not be possible to access the Azure Functions from another domain (such as localhost:44388).

When developing locally, it is recommended that you instead call the /api (localhost:44388/api) route using the SWA CLI, as outlined in this doc: Set up local development for Azure Static Web Apps | Microsoft Learn

Just to clarify, could you let us know the purpose of the function app to retrieve the application settings? Is this for dev/test purposes or prod purposes? Please do share more details about your requirement.

Further, just to highlight, the App settings and connection strings are stored encrypted in Azure. They're decrypted only before being injected into your app's process memory when the app starts.

Checkout similar discussion thread: CORS on API portion of Azure Static Web Apps #108