Azure Functions CORS – Part 1

CORS – stands for Cross-Origin Resource Sharing. It is used to protect cross-origin request between your server and browser. Azure Functions allows sharing of resources using CORS. You simply have to whitelist the domain which you want your function to accept request from.

In this blog post we will work on series of steps before configure CORS in Azure Functions. Various steps that will be carried out  will be as follows.

  • Create Azure Function & Test using Postman
  • Create asp.Net Web Application using Visual studio and write a JavaScript code to access your function
  • Publish the Web Application using Azure App Service (Web App) & test the Web App
  • Configure CORS and re-test the Web Application.

Login to Azure Portal and create a Function App.

azurefunctioncors

Once the Function App is created successfully. Create a  + New function. Select the development environment as Azure Portal. Choose the below Template – “Webhook + API”

AzureFunctioncors2.png

You will see a pre-defined run.csx code which returns – “Hello, name” based on the name  used while doing a POST to the function API.

We will be using this sample code. Save the function. Click on </> Get function URL to get the URL.

AzureFunctioncors3.png

AzureFunctioncors4.png

Lets quickly test the function using Postman. We pass a json message to the function and it returns output as below.

AzureFunctioncors5.png

Now our next step is to access this function using a JavaScript code. Create a simple ASP.NET Web Application in Visual Studio.

  • InsertPage.html – Contains JavaScript code
  •  Web.config

azurefunctioncors6

The Html page has a text-box where we will pass a value and press a submit button. On Submit the JavaScript code will call the Azure Function and return an appropriate output on the Web Application.

AzureFunctioncors7.png

In our next blog post we will publish this Web Application using Azure App Service  (WebApp) and configuring CORS.

Stay tuned for the next blog post !

 

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s