Any way to set access-control-allow-origin for a windows azure blob

Question

I am storing json blobs on azure which I am accessing via XHR. While trying to load these blobs I am getting this error:
XMLHttpRequest cannot load http://myazureaccount.blob.core.windows.net/myjsoncontainer/myblob.json?json. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

Is there any way to set the Access-Control-Allow-Origin header of a blob returned by azure?

Answer 1

Windows Azure Storage added CORS support on November 26, 2013: Cross-Origin Resource Sharing (CORS) Support for the Windows Azure Storage Services. More details and C#/JavaScript samples - Windows Azure Storage: Introducing CORS.

The CORS options can be set on a storage account using the Windows.Azure.Storage client library version 3.0.1.0 or later, available from NuGet, using something similar to the following pseudocode:

var storageAccount = CloudStorageAccount.Parse(
          "DefaultEndpointsProtocol=https;AccountName=ABC;AccountKey=XYZ");
var blobClient = storageAccount.CreateCloudBlobClient();
var serviceProperties = blobClient.GetServiceProperties();

serviceProperties.Cors.CorsRules.Clear();

serviceProperties.Cors.CorsRules.Add(new CorsRule() {
    AllowedHeaders = { "..." },
    AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Head,
    AllowedOrigins = { "..." },
    ExposedHeaders = { "..." },
    MaxAgeInSeconds = 600
});

blobClient.SetServiceProperties(serviceProperties);

Answer 2

Not currently but Scott Hanselman, Program Manager for Azure, has confirmed support for this is coming soon on Feb 4th 2013.

Answer 3

One of the helpful MSDN Blog it might help you all.

The code which I was missing was

private static void ConfigureCors(ServiceProperties serviceProperties)
{
    serviceProperties.Cors = new CorsProperties();
    serviceProperties.Cors.CorsRules.Add(new CorsRule()
    {
        AllowedHeaders = new List<string>() { "*" },
        AllowedMethods = CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Post,
        AllowedOrigins = new List<string>() { "*" },
        ExposedHeaders = new List<string>() { "*" },
        MaxAgeInSeconds = 1800 // 30 minutes
     });
}

It basically add some rules to SAS Url, and I am able to upload my files to blob.

Answer 4

Nope, they still haven't added this. You can set up a proxy on an Amazon EC2 instance that fetches the objects on the Azure CDN, then returns the data with the Access-Control-Allow-Origin header, which allows you to make the requests through our proxy. You can also temporarily cache stuff on the proxy to help with speed/performance (this solution obviously takes a hit there), but it's still not ideal.

Answer 5

You might try using JSONP.

The idea is that you define a callback function on your site that will receive the JSON content, and your JSON document becomes a JavaScript file the invokes your callback with the desired data. [Thomas Conté, August 2011]

To do this, create a document that wraps your JSON content in a JavaScript function call:

{ "key": "value", ... }

becomes

myFunc({ "key": "value", ... });

Now you're not loading JSON but JavaScript, and script tags are not subject to Single Origin Policy. jQuery provides convenient methods for loading JSONP:

$.ajax({
    url: 'http://myazureaccount.blob.core.windows.net/myjsoncontainer/myblob.jsonp?jsonp',
    dataType: 'jsonp',
    jsonpCallback: 'myFunc',
    success: function (data) {
        // 'data' now has your JSON object already parsed
        // and converted to a JavaScript object.
    }
});

Answer 6

While jsonp works, I wouldn't recommend it. Read the first comment to this answer for specifics. I think the best way around this is to use CORS. Unfortunately, Azure doesn't support this. So if you can, I would change storage providers to one that does (Google Cloud Storage for example)