Hi There,

I am trying to upload images to Azure blob storage, but am getting the error "No 'Access-Control-Allow-Origin' header is present on the requested resource."   It is driving me crazy.

I am currently using local host to access the server, so it may have to do with cross domain policies.  The steps I have taken so far are:

(1) I use a table (via azure mobile services) for generating a unique ID for the filename (i.e. inserting into the table, I can use the ID field).  While I do this, I also generate a SAS for the azure storage location.  This code seems fine.

(2) In uploading the image file from html, I use the following code:

var uriWithAccess = item.imageUri + "?" + item.sasQueryString;
var xhr = new XMLHttpRequest();
xhr.onerror = fail;
xhr.onloadend = uploadCompleted;
xhr.open("PUT", uriWithAccess);
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob')
xhr.setRequestHeader('x-ms-blob-content-type', 'image/png');
xhr.send(document.getElementById('fileToUpload').files[0]);

The SAS string looks file, but returns the following error...

XMLHttpRequest cannot load http://mystorageaccount.blob.core.windows.net/mycontainer/aabbccdd.png?se=2015-0%3A02%3A23Z&sr=b&sp=w&sig=sMgAoczzA%2BQFq6eIw4EFyfK7Qwdet7b135Jx8HH3xgJo%3D. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access. The response had HTTP status code 403.

I am thinking that this may be because the CORS for the blob storage has not been sent accordingly.  I tried the following (from the node.js server) to set the permissions...

        var accessKey = 'w79zXXXXXXXRg==';
        var storageAccount = 'mystorageaccount';

        var blobService = azureStorage.createBlobService(storageAccount, accessKey);
        console.log("service created");
        var serviceProperties = {
            Cors: {
                CorsRule: [{
                        AllowedOrigins: ['*'],
                        AllowedMethods: ['GET'],
                        AllowedHeaders: [],
                        ExposedHeaders: [],
                        MaxAgeInSeconds: 60
                    }]
            }
        };

        var callback = function () {
            console.log("changed the cors rule");
            request.execute();  // this is included as it was part of a table insert call
        }
        console.log("about to set properties");
        blobService.setServiceProperties(serviceProperties, callback);
        console.log("properites set");

I am assuming the above should have granted external permissions to the site.

This is really doing my head in.

Any suggestions greatly appreciated.

Cheers,

Scott

Hi,

CORS rules are set at the service level, so you need to enable or disable CORS for each service (Blob, Queue and Table) separately.

By default, CORS is disabled for each service.

To enable CORS, you need to set the appropriate service properties using version 2013-08-15 or later, and add CORS rules to the service properties.

For details about how to enable or disable CORS for a service and how to set CORS rules for blob, please refer to Set Blob Service Properties that might help.

Here is a sample of a single CORS rule, specified via a Set Service Properties operation:

<Cors>    
      <CorsRule>
            <AllowedOrigins>http://www.contoso.com, http://www.fabrikam.com</AllowedOrigins>
            <AllowedMethods>PUT,GET</AllowedMethods>
            <AllowedHeaders>x-ms-meta-data*,x-ms-meta-target*,x-ms-meta-abc</AllowedHeaders>
            <ExposedHeaders>x-ms-meta-*</ExposedHeaders>
            <MaxAgeInSeconds>200</MaxAgeInSeconds>
    </CorsRule>
<Cors>

Regards,

Shirisha Paderu

Hi Shirisha!

Thanks very much for the tip!  

I have worked through the documents and put it into code (appended below).

The next question - is where to call this PUT request from in order to change the CORS rule.  I am working remotely (i.e. from local host - just writing a small netbeans html5 project), and the ajax request is giving me the error:  "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access. The response had HTTP status code 403."

I am guessing I need to be calling it from the same origin?  How can I call this javascript from the blob origin?  I am a little lost.

Any suggestions greatly appreciated!

Cheers,

Scott

function setRule() {
    // this simply loads the .xml file containing
    // the CORS rule into memory, then uploads to azure
    $.ajax({
        url: "CorsRules.xml",
        dataType: "text",
        success: function (data) {
            uploadToAzure(data);
        }
    });
}

function uploadToAzure(xml) {
    var account = "#######.blob.core.windows.net";
    $.ajax({
        method: "PUT",
        url: "https://" + account + "/restype=service&comp=properties",
        headers: {
            Authorization: "SharedKey",
            myaccount: "w79zUk2l######15blJRg=="
        },
        dataType: "xml",
        data: xml,
        crossDomain: true,
        success: function (result) {
            alert(result);
        },
        error: function (result) {
            alert("error");
        }
    });
}

Hi Scott,

Sorry for the delay and any inconvenience caused.
As this requires detailed troubleshooting and might also require more details from you, please raise a Technical Support Case for further assistance.

Regards,
Malar.

• Proposed as answer by Shirisha PaderuMicrosoft contingent staff, Moderator 22 hours 1 minutes ago

Hi Scott,

Sorry for the delay and any inconvenience caused.
As this requires detailed troubleshooting and might also require more details from you, please raise a Technical Support Case for further assistance.

Regards,
Malar.

• Proposed as answer by Shirisha PaderuMicrosoft contingent staff, Moderator Friday, July 03, 2015 9:17 AM
• Marked as answer by Nagamalar NagarajanMicrosoft contingent staff, Moderator 21 hours 27 minutes ago

Hi Scott,

Sorry for the delay and any inconvenience caused.
As this requires detailed troubleshooting and might also require more details from you, please raise a Technical Support Case for further assistance.

Regards,
Malar.

• Proposed as answer by Shirisha PaderuMicrosoft contingent staff, Moderator Friday, July 03, 2015 9:17 AM
• Marked as answer by Nagamalar NagarajanMicrosoft contingent staff, Moderator Saturday, July 04, 2015 9:49 AM