Why am I getting a 'blocked by CORS policy' error when making requests to my .NET Azure Function from a React Azure Static Web App?

Question

I am working on a web application with front-end in react(azure static web app) and backend in dotnet(deployed as azure function). I am facing CORS errors:

Access to XMLHttpRequest at '/limitMasterDetails/segmentLimit' from origin 'https://nice-sea-xxxxxxxx.3.azurestaticapps.net' 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.

I have tried following steps:

• Modify function app CORS configuration to allow origin
• Modify APIM Cors policy on API level to allow origin
• Add CORS policy in Startup.cs class.
• Modify function app host.json to allow origin
• Cleared browser cache and tried on different browser.

None of these steps have been helpful. Please advise.

Answer 1

The error you are getting, blocked by CORS policy, occurs when a web application attempts to make a request to a different domain, protocol, or port and the server does not explicitly allow it.

• Check your Azure Function CORS settings.

• Add the origin of your Azure Web App to the Allowed Origins.

• If you are using custom headers or HTTP methods, add them to the Allowed Headers and Allowed Methods.

• Check that you have installed the Microsoft.Azure.WebJobs.Extensions.Http NuGet package and its dependencies in your Azure Function project.

Check that Azure Static Web App settings, that you have correctly placed the URL and endpoint for your Azure Function in your React Azure Static Web App configuration.

If you are using Azure API Management in front of your Azure Function, review the CORS settings within APIM and check the origins are allowed. In the Startup.cs file

public class Startup : FunctionsStartup
{
    public override void Configure(IFunctionsHostBuilder builder)
    {
        builder.Services.AddCors(options =>
        {
            options.AddDefaultPolicy(builder =>
            {
                builder
                    .AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader();
            });
        });
    }
}

If the issue still persists, you need to check if there are any other CORS settings that are overriding your function app settings.

For further information refer to the MS Doc1 and MS Doc2.