It all began by attempting to over-engineer issues with an Azure Function. And then it wouldn’t work! This weblog submit is generally for me in order that I can discover these things later after I inevitably hit the identical CORS concern.
I had gone via the entire Microsoft tutorial for JavaScript Azure Functions, after which examined my Azure Function regionally and distant through Visual Code’s built-in unit testing. When I attempted to get my utility’s JavaScript to name the operate, I used to be abruptly blocked by a CORS concern.
The Code
In my JavaScript, I’ve a quite simple fetch name to my Azure Function:
fetch(`The Error
Invoking this led to the next error:
Access to fetch at ' from origin ' has been blocked by CORS coverage: No 'Access-Control-Allow-Origin' header is current on the requested useful resource. If an opaque response serves your wants, set the request's mode to 'no-cors' to fetch the useful resource with CORS disabled.
The Fix
A number of Google outcomes later, I discovered this StackOverflow query:
The reply right here confirmed that this can be a CORS configuration on the Azure facet that must be completed within the Portal. From Visual Code I right-clicked on my Azure operate and chosen Open in portal:
This popped open the Azure Portal to the proper operate in my subscription. On the left pane, I then scrolled right down to the API part and chosen CORS.
A CORS administration panel masses up the place I can enter allowed origins:
From right here I may add my native growth URL and the whole lot labored! HOORAY!
Obviously, afterward I should add any staging or manufacturing internet hosting domains as properly, however for now, I can transfer ahead.