It all started by trying to over-engineer things with an Azure Function. And then it wouldn’t work! This blog post is mostly for me so that I can find this stuff later when I inevitably hit the same CORS issue.
Invoking this led to the following error:
Access to fetch at 'https://myfunction.azurewebsites.net/api/capturesubscribers?channelId=REDACTED' from origin 'http://dev.local' 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.
The answer here confirmed that this is a CORS configuration on the Azure side that needs to be done in the Portal. From Visual Code I right-clicked on my Azure function and selected Open in portal:
This popped open the Azure Portal to the correct function in my subscription. On the left pane, I then scrolled down to the API section and selected CORS.
A CORS management panel loads up where I can enter allowed origins:
From here I could add my local development URL and everything worked! HOORAY!
Obviously, later on I will have to add any staging or production hosting domains as well, but for now, I can move forward.
Just a question out of curiosity. Is this to do anything with planning to replace Vercel Next.JS Edge functions with Azure Serverless functions?
So I started playing with Azure Functions to find out how those worked! Years of being a .NET dev has not prepared me for what is going on these days with serverless and front-end script 🙂
I haven’t played with Vercel Edge functions either, so I should find a way to work that into this project too!