Microsoft recently introduced Cross-Origin Resource Sharing (CORS) support for Azure blobs, queues and tables.

This means you can now access Azure resources using AJAX-only calls from any domain which is quite handy. Imagine having a website hosted on your own server and allowing your users to upload large files to Azure Storage. Previously, you would need to upload and siphon all the data through your server and you would have to use Azure Storage SDK to do it. This means that processing time and bandwidth of your server are being wasted just for relaying data to its real destination. The good news is - you can now upload files to Azure Storage directly from the browser, using only client-side code and the Azure REST API, and without wasting additional server resources.

To be able to upload files this way, you would of course need to enable CORS for a particular Azure Storage account you want to use. There are two tips that could save you time with this:

• as far as I know, you can’t manage Azure CORS rules through the Azure management portal at this moment, it needs to be done using the Azure SDK
• unless you’re working on something very dynamic, which requires you to change CORS rules on-the-fly, you would only need to create these rules once so it’s not a “per user/api-call” thing

What this means is - to set-up the CORS rules you will have to add some code to your project, which would need to be fired only once and then be forgotten about. If that doesn’t make a whole lot of sense, we decided to create a simple web app which would allow us to easily manage CORS rules for any Azure Storage account. We would like to share that with you so feel free go and go get it over at github. After you download the source code, simply build the solution in VS and you’re ready to go. The application will prompt you for Azure Storage name and key and it will afterwards let you list, add, edit and delete CORS rules.

If you really need to code this yourself and add it to your project, this is an example of how you could create a CORS rule using the Azure SDK:

private static string _accountName = "YOUR_STORAGE_ACCOUNT_NAME";
private static string _accountKey = "YOUR_STORAGE_ACCOUNT_KEY";

static void Main(string[] args)
{
    var blobClient = GetAzureClient();
    ConfigureCors(blobClient);
}
private static void ConfigureCors(CloudBlobClient blobClient)
{
    var serviceProperties = blobClient.GetServiceProperties();
    serviceProperties.Cors.CorsRules.Clear(); // this will delete any existing CORS rules
    var corsRule = new CorsRule()
    {
        AllowedOrigins = new List<string> { "http://test.local" },
        AllowedMethods = CorsHttpMethods.Put,
        AllowedHeaders = new List<string> { "x-ms-*", "content-type", "accept" },
        ExposedHeaders = new List<string> { "x-ms-*" },
        MaxAgeInSeconds = 60 * 60 // for an hour
    };
 
    serviceProperties.Cors.CorsRules.Add(corsRule);
    blobClient.SetServiceProperties(serviceProperties);
}
private static CloudBlobClient GetAzureClient()
{
    string storageConnectionString = String.Format("DefaultEndpointsProtocol=https;AccountName={0};AccountKey={1}", _accountName, _accountKey);
 
    CloudStorageAccount cloudStorageAccount = CloudStorageAccount.DevelopmentStorageAccount;
    CloudStorageAccount.TryParse(storageConnectionString, out cloudStorageAccount);
 
    return cloudStorageAccount.CreateCloudBlobClient();
}

Hope this helps! :)

For some additional info, check out Gaurav Mantri’s awesome post about Azure CORS, it’s a very good and helpful read.