Azure Functions, localhost and CORS how to get them working together when debugging locally

TL;DR You need to update your local.settings.json file.

Another real experience, we have an Azure Function that we call from a file hosted in SharePoint Online, its a SPA in effect.

When developing we run the Azure function locally in debug mode.

If we call it from the browser this works fine:

http://localhost:7071/api/action

If we use a rest call from a command line this works fine:

$Action = Invoke-RestMethod `
-Method:Get `
-Uri:"http://localhost:7071/api/action"

If we use a fetch from the SPA

return await (
await fetch(`${getAPIBaseURI()}/api/${type}/${id}`, { method: "GET" })
).json();

We get

Access to fetch at ‘http://localhost:7071/api/Action/312' from origin ‘https://~~~~~~~~.sharepoint.com' has been blocked by CORS policy: 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.

On production its not an issue as we have CORS configured correctly, and CORS is a good thing as it controls where your function can be accessed from.

To do the same when using local host just add a “Host” section to you local.settings.json file.

Then it is allowed through.

TL;CR You need to update your local.settings.json file.