shlatchz shlatchz -4 years ago 227
jQuery Question

GET Azure Blob using JQuery from a Chrome App

I'm trying to do a simple GET request from a Chrome App that I'm developing to a blob on my Azure Storage using the following jquery code:

headers: {
'x-ms-range': 'bytes=' + from + '-' + to,
'x-ms-version': version,
'x-ms-client-request-id': guid()
url: '',
type: "GET",
}).done(function (data) {
}).fail(function (error) {

When I try, I get the following errors:


XMLHttpRequest cannot load Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://blablabla' is therefore not allowed access. The response had HTTP status code 403.

Please help! I tried lots of CORS options but none worked for me.
I really want to keep it a simple ajax request, and avoid using custom libraries for that request.



I tried enabling CORS via the following code:

url: '',
headers: {
'Content-Type': 'application/xml',
'x-ms-date': new Date(),
'x-ms-version': '2013-08-15',
'Authorization': 'SharedKey'
type: "PUT",
data: '<?xml version="1.0" encoding="utf-8"?><StorageServiceProperties><Cors><CorsRule><AllowedOrigins>' + THIS_URL + '</AllowedOrigins><AllowedMethods>GET,PUT</AllowedMethods><MaxAgeInSeconds>500</MaxAgeInSeconds><ExposedHeaders>x-ms-*</ExposedHeaders><AllowedHeaders>x-ms-*</AllowedHeaders></CorsRule></Cors></StorageServiceProperties>'
}).done(function (data) {
}).fail(function (error) {

and now I get the preflight error on this request...

Answer Source

You dont have to use any custom libraries for this. All you have to need is enable CORS in your Blob storage.

You can find the details here:

below code will be relevant only for C# developers. There are REST api to enable CORS in azure

And this is how I enabled CORS via C# code in my blob account:

public void EnableCors(CloudStorageAccount storageAccount, CorsRequest corsRequest, IRequestOptions requestOptions=null, OperationContext operationContext = null)
            var serviceTypeClient = storageAccount.CreateCloudBlobClient();

            ServiceProperties serviceProperties = new ServiceProperties();

            // Nullifying un-needed properties so that we don't 
            // override the existing ones 
            serviceProperties.HourMetrics = null;
            serviceProperties.MinuteMetrics = null;
            serviceProperties.Logging = null;

            serviceProperties.Cors.CorsRules.Add(new CorsRule()
                AllowedHeaders = corsRequest.AllowedHeaders,
                ExposedHeaders = corsRequest.ExposedHeaders,
                AllowedMethods = corsRequest.AllowedMethods,
                AllowedOrigins = corsRequest.AllowedOrigins,
                MaxAgeInSeconds = corsRequest.PreFlightRequestAgeInMins * 60,
            serviceTypeClient.SetServiceProperties(serviceProperties, requestOptions as BlobRequestOptions, operationContext);

where storageAccount - your storage account

corsRequest - just the required values I read it from config file

I kept requestOptions and operationContext as null

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download