Access to fetch at ‘xxxxx’ from origin ‘xxxxxxx’ has been blocked by CORS policy for Azure Function App

Error:

Access to fetch at ‘xxxxx’ from origin ‘xxxxxxx’ 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.

Issue:

Cross-Origin Resource Sharing (CORS) allows JavaScript code running in a browser on an external host to interact with your backend. Specify the origins that should be allowed to make cross-origin calls (for example: http://example.com:12345). To allow all, use “*” and remove all other origins from the list. Slashes are not allowed as part of domain or after TLD.

Fix:

Go to Azure Portal -> Function App -> My Function App -> CORS

Make sure the Allowed Origins include the domain of the calling web app.

Use * for all origins.

Allowed Origins	Note
*	All origins
https://portal.azure.com	Default

Note: This needs to be set in the function app, not the Blazor app.