This is a follow-up from the previous post on deploying an ONNX model using Azure Functions. Suppose you’ve got the API working great and youwant to include this amazing functionality on a brand new website. What follows is the harrowing path through failure we all must take to eventually reach the glorious end: an AI that understands tacos an burritos like I do.
Mixed Content Issues
Calling an unsecured endpoint (the Azure Function using
http instead of
https) from a secured site is a no-no.
Luckily Azure Functions can also be called via https! If you want to have that as the default setting, its very easy to do:
Basically you go to the
TLS/SSL settings and turn
HTTPS Only to
On to make sure all calls to the API are secured.
Fixing CORS Issues
As soon as you fix this issue by adding the setting above and updating your code to point to an
https API endpoint you will definitely run into this issue:
Our Tacos AI API is being protective over who can call it (as it should be). This is a security protection built into the web called CORS or Cross-origin Resource Sharing. In order to allow other sites (or origins) to use this resource (or share the API with others) we need to explicitly tell our API that this functionality is indeed permitted. Here’s how you set this up in Azure Functions:
In the CORS settings we add the site that wishes to call the API and explicitly give it permission to share in the glory of our taco resource. As soon as we set this everything works!
What follows is what is actually happens behind the scenes.
In the bonus section I thought I would explain how this all works. The first thing I hope you noticed was that there was two calls to the API. The second one was the regular
POST call that we initiated. The first call though was an
OPTIONS call (illustrated below).
I highlighted two important sections:
- This is the headers that were sent from our website to our API. Notice we are telling them who we are (Origin is our website and Host is our API) and what we want to do (we want to
POSTand will ask for some kind of content).
- Our API responded that it will indeed allow the
POSTcall from the Origin and return the content we want.
This is basically the dance that happens to make sure everything is on the up-and-up.
The second call is of course the
POST call to send our API a picture of a taco or a burrito:
Again our website sends both the Origin (our site) and the Host (the API) as well as the json payload. Here we see the response in all of its glory!
Done! It all seems to work!
Finally, I know I spent zero time explaining how I built the actual static site: I will leave that for another time!
Now for some helpful references: