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.
I had gone through the whole Microsoft tutorial for JavaScript Azure Functions, and then tested my Azure Function locally and remote via Visual Code’s built-in unit testing. When I tried to get my application’s JavaScript to call the function, I was suddenly blocked by a CORS issue.
The Code
In my JavaScript, I have a very simple fetch call to my Azure Function:
fetch(`https://myfunction.azurewebsites.net/api/capturesubscribers?channelId=${channelId}`)
The Error
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 Fix
A few Google results later, I found this StackOverflow question: https://stackoverflow.com/questions/45332131/call-azure-function-from-javascript
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.
Top comments (4)
Isn't adding 'localhost' or 'dev.local' a security risk in production? Or am I misunderstanding how this setting in the Azure Portal works?
For your production environment, you do want to remove any unsecure settings and restrict it to your production origin configurations. This is fine for some easy dev work. However, I wouldn't rely in production on CORS to provide my security. I would want to make sure I was using networking security to prevent entry into my production infrastructure from external untrusted parties.
Did you try to run fetch from 3rd party service like js fiddle, zapier?
I have connection timeout there, but API calls work from browser or postman. It seems like there are some IPs being blocked
Sorry Boris, I didn't try that path out. Let me know if you figure it out, though!