Post
Ask Question

Handling CORS Policy In Azure Functions

In my last article, we got an overview of Azure Functions. In this article, we are going to see how to consume an Azure function from the JavaScript code by handling the CORS.

What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism to secure the cross-origin request and data transfer between the browser and the server. By default, Azure Functions do not allow all the cross-origin requests, which means if you call the Azure Function API from another domain, it will block the request. To allow other domains to access the function, we need to register those domains in allowed origins entry in the Azure Function. This can be done through Azure Portal.


Handling CORS in Azure Functions


HttpTrigger1 is the Azure Function which we created in my last article. Let’s check the response of the API using POSTMAN tool.
 
 
 
From the above image, you can notice we are passing a JSON payload to the function and it’s responded with some message for the request. Let’s access this function through JavaScript code.

Create an HTML page and write the below code. 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title></title>  
  6.   
  7.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>  
  8. </head>  
  9. <body>  
  10.     <h3> Azure function</h3>  
  11.     <label>Name: </label> <input type="text" id="txtName" />  
  12.     <button id="btnName">Click Me</button>  
  13.     <label id="message" style="color:green"></label>  
  14.     <script>  
  15.         $(document).ready(function () {  
  16.             $("#btnName").on("click", function () {  
  17.   $.ajax({  
  18.                     type: "POST",  
  19.                     url: "https://myfunctionappdemos.azurewebsites.net/api/HttpTrigger1?code=oRJcOc6j37H9vJKcdZzBRX95wKRsRIhdQaiPiKnNvVvUdgT9i0TYgw==",  
  20.                     data: JSON.stringify({  
  21.                         "name": $("#txtName").val(),  
  22.                     }),                     
  23.                     success: function (response) {                     
  24.                         $("#message").text(response);  
  25.                     },  
  26.             })     
  27.  });           
  28.         })  
  29.    </script>  
  30. </body>  
  31. </html>  
From the above code, you can notice we have a text box control and button control. When a user enters his/her name and clicks on the button, it will fire the button on click event where we have written an AJAX call to call Azure Functions. Once Azure sends back the response, it will print the message in a label.

I deployed this HTML page in Azure with the domain name - https://github-ci-staging.azurewebsites.net/

Let's run this page in the browser.
 
When a user enters the name and clicks on the button, it will throw an error in the console, as shown in below figure.
 
The error message tells that this domain is blocked based on the CORS policy.
 

Follow the below steps to register the domain https://github-ci-staging.azurewebsites.net/ in the Azure Function to allow the request from it

Step 1

Log into the Azure portal.
 

Step 2

Go to an existing function, the one that was created in my last article.
 
 
Step 3

In platform features section, select CORS. We need to provide the domain name here. In my case, I provided https://github-ci-staging.azurewebsites.net. Finally, save it. 
 
 
 
Step 4
 
Let’s run our web page again.
 
 
Yes, from the above figure, you can notice we got a response from the Azure Function. To allow all the same origin, just provide * and remove all other origins from the list.

Conclusion:

We have seen how to handle and update the CORS Policy in Azure function API using the Azure portal. Will look at more features of Azure Functions in my future articles.


Similar Articles