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

asked 2022-06-03T06:04:51.823+00:00
Soumik Mukhopadhyay 21 Reputation points

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

Azure Functions
Azure Functions
An Azure service that provides an event-driven serverless compute platform.
2,577 questions
Azure App Service Static Web Apps
{count} votes

Accepted answer
  1. answered 2022-06-08T20:12:21.033+00:00
    ajkuma 13,371 Reputation points Microsoft Employee

    @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

    No comments

0 additional answers

Sort by: Most helpful