No 'Access-Control-Allow-Origin' header is present when creating BlobServiceWithSas

Question

This is the first time I use Azure Storage JS API. I have followed instruction on this Microsoft tutorial. I generate the SAS key on the node server with successful results but I still get the authentication failed error. I'm using the libraries provided by Microsoft Azure. How may I fix this?

function test() {
        Restangular.all('cdn/sas').post({container: 'photos'}).then(function (sas) {
                var blobUri = 'https://hamsar.blob.core.windows.net';
                var blobService = AzureStorage.createBlobServiceWithSas(blobUri, sas.token);
                blobService.listContainersSegmented(null, function (error, results) {
                    if (error) {
                        // List container error
                    } else {
                        // Deal with container object                            
                    }
                });
            }, function (error) {
                console.log("Error generating SAS: ", error);
            });
    }

Error messages:

Possible duplicate of [Simple example for why Same Origin Policy is needed](https://stackoverflow.com/questions/14667189/simple-example-for-why-same-origin-policy-is-needed) — Hitmands, Jun 27 '17 at 16:56

Brando Zhang · Accepted Answer · 2017-06-28T07:07:02.383

According to your error message, I found you create a Service SAS token. But if you want to list all the container name in your storage account. You need use account SAS token.

Notice: You could also use the blobService.listBlobsSegmented, you should make sure your service sas token has the permission to list the blob file and set the container name.

Like this:

blobService.listBlobsSegmented('mycontainer', null, function (error, results)

If you want to list all the container, I suggest you could follow these codes to generate the Account SAS.

Code like this :

 var getPolicyWithFullPermissions = function(){
  var startDate = new Date();
  var expiryDate = new Date();
  startDate.setTime(startDate.getTime() - 1000);
  expiryDate.setTime(expiryDate.getTime() + 24*60*60*1000);

  var sharedAccessPolicy = {
    AccessPolicy: {
      Services: AccountSasConstants.Services.BLOB + 
                AccountSasConstants.Services.FILE + 
                AccountSasConstants.Services.QUEUE + 
                AccountSasConstants.Services.TABLE,
      ResourceTypes: AccountSasConstants.Resources.SERVICE + 
                     AccountSasConstants.Resources.CONTAINER +
                     AccountSasConstants.Resources.OBJECT,
      Permissions: AccountSasConstants.Permissions.READ + 
                   AccountSasConstants.Permissions.ADD +
                   AccountSasConstants.Permissions.CREATE +
                   AccountSasConstants.Permissions.UPDATE +
                   AccountSasConstants.Permissions.PROCESS +
                   AccountSasConstants.Permissions.WRITE +
                   AccountSasConstants.Permissions.DELETE +
                   AccountSasConstants.Permissions.LIST,
      Protocols: AccountSasConstants.Protocols.HTTPSORHTTP,
      Start: startDate,
      Expiry: expiryDate
    }
  };

  return sharedAccessPolicy;
};

              var sharedAccessSignature = azure.generateAccountSharedAccessSignature(environmentAzureStorageAccount, environmentAzureStorageAccessKey, getPolicyWithFullPermissions );

Then you could use the account SAS to list the account's container.

Result:

More details about the difference between service sas and account sas, you could refer to this article.

No 'Access-Control-Allow-Origin' header is present when creating BlobServiceWithSas

1 Answers1