Manage Cross Origin Resource Sharing (CORS) on Windows Azure

Introduction

Yesterday I experienced a problem. The problem is how to view a file (content) in a webpage using JavaScript/jQuery code stored in Windows Azure BLOB storage. Cross-Origin Resource Sharing (CORS) is relevant to fixing this problem.

CORS

All browsers support the same origin policy, in other words browsers prevent showing content from a different domain. So by enabling Cross-Origin Resource Sharing (CORS) the browser can access the contents from the different domain. So in short we can say the CORS is an HTTP feature that enables web applications running under one domain to access a resource under another domain.

Let us assume there is a case where we have BLOB storage and want to view the file on the web page using the JavaScript/jQuery code. We can do it either by making a service call (server-side) to download the file and show it on the web page or if our BLOB container is CORS enabled then we can eliminate the service call and directly using the JavaScript/jQuery code to view the file in the browser.

A CORS request from an origin domain may consist of two separate requests:

• A pre-flight request
• The actual request

The web browser (user agent) sends a request prior to the actual request with header information, web methods and origin domain that are called the pre-flight request. This pre-flight request (call) verifies with the service CORS rule for that domain and returns the status (HTTP status code 200 if the sender request rule matches the service CORS rule). When the pre-flight request is accepted and returns status code 200. Then the user agent sends the actual request.

For more details on CORS, please refer to the MSDN documentation.

Creating a Sample Application to set CORS

Create a simple console application EnableCors. Install a Nuget package for Windows Azure storage.


Figure: Install a Nuget package

The folowing is the code for program.cs.