Post
Ask Question

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.

Install a Nuget package
Figure: Install a Nuget package

The folowing is the code for program.cs.

  1. using Microsoft.WindowsAzure.Storage;  
  2. using Microsoft.WindowsAzure.Storage.Shared.Protocol;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Text;  
  7. using System.Threading.Tasks;  
  8.    
  9. namespace EnableCorsAzure  
  10. {  
  11.     class Program  
  12.     {  
  13.         static void Main(string[] args)  
  14.         {  
  15.             CloudStorageAccount storageAccount = CloudStorageAccount.Parse("your azure storage connection string");  
  16.    
  17.             var blobClient = storageAccount.CreateCloudBlobClient();  
  18.             var serviceProperties = blobClient.GetServiceProperties();  
  19.             var cors = new CorsRule();  
  20.             cors.AllowedOrigins.Add("*");  
  21.             cors.AllowedMethods = CorsHttpMethods.Get;  
  22.             cors.MaxAgeInSeconds = 360000;  
  23.             serviceProperties.Cors.CorsRules.Add(cors);  
  24.             blobClient.SetServiceProperties(serviceProperties);  
  25.         }  
  26.     }  
  27. }  
In the following lines you will see we have created rules for the CORS:
  1. var cors = new CorsRule();  
  2. cors.AllowedOrigins.Add("*");  
  3. cors.AllowedMethods = CorsHttpMethods.Get   
  4. cors.MaxAgeInSeconds = 360000;  
  5. serviceProperties.Cors.CorsRules.Add(cors);  
  1. cors.AllowedOrigins.Add("*"): service would send required CORS headers for all origin.*

  2. cors.AllowedMethods: service would send the required CORS headers for the get methods.

    We can add others with CorsHttpMethods.Get | CorsHttpMethods.Post | CorsHttpMethods.Put.

  3. The MaxAgeInSeconds indicates the maximum amount of time that a browser can cache the pre-flight request. If the rule does not change frequently then we can set the max value to it.

So this is how we can set the Windows Azure Storage account CORS enabled.


Similar Articles