0

Im trying to upload file directly from web browser using the Azure storage Rest API and Ajax(actually im using Angular's $http) I've followed every possible official and custom guides without success.

For starters my CORS is set like this:

var storageAccount = CloudStorageAccount.Parse(StorageConnectionString);
        var blobClient = storageAccount.CreateCloudBlobClient();
        var blobServiceProperties = blobClient.GetServiceProperties();

        blobServiceProperties.Cors = new CorsProperties();
        blobServiceProperties.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
        });

        blobClient.SetServiceProperties(blobServiceProperties);

At UI level I call my own API that returns the SAS URL like this:

        var storageAccount = CloudStorageAccount.Parse(StorageConnectionString);
        var blobClient = storageAccount.CreateCloudBlobClient();
        var container = blobClient.GetContainerReference("fotosrestaurantes");
        var blobPermissions = container.GetPermissions();

        blobPermissions.SharedAccessPolicies.Clear();

        blobPermissions.SharedAccessPolicies.Add("enviarFotoRestaurante", new SharedAccessBlobPolicy()
        {
            Permissions = SharedAccessBlobPermissions.Write | SharedAccessBlobPermissions.Read | SharedAccessBlobPermissions.Create | SharedAccessBlobPermissions.Add
            SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes(30),
        });

        container.SetPermissions(blobPermissions);

        var sasToken = container.GetSharedAccessSignature(null, "enviarFotoRestaurante");

        return Ok(sasToken);

Then im using this Angular Module for uploading the blob: https://github.com/kinstephen/angular-azure-blob-upload

So far so good, but when I try to upload I get this from OPTIONS request (from Chrome's Network tab):

403 Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.

And this from the console:

XMLHttpRequest cannot load 'myAzureHttpLink/fotosrestaurantes/google.jpg?sv=2015-04-05&sr=b&si=enviarFoto&sig=***&se=2016-01-11T14%3A16%3A22Z&sp=w&comp=block&blockid=YmxvY2stMDAwMDAw Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:34090' is therefore not allowed access. The response had HTTP status code 403.

Now, as far as I could understand from the oficial documentation(most are very breif on thier matter and have lots of links that almost never cover what you really need on them) if I choose to use SAS URL I dont need the authorization header. As Gaurav says here: https://stackoverflow.com/a/33846704/3198372

I've tryed everything, from container SAS to blob SAS but nothing works. As if the CORS configuration and SAS URL just dont work(even if they are there).

Anyone knows where Im wrong?

Community
  • 1
  • 1
Geter Moura
  • 65
  • 1
  • 8
  • we can try the follow;: 1) The doc mention only AllowedOrigin can have "asterix", https://msdn.microsoft.com/en-us/library/azure/hh452235.aspx try to avoid use "asterix" in other propertie more than AllowedOrigin 2) not to include any CORS config wich will disable CORS for the blob service: see how the CORS rules are applied here: https://msdn.microsoft.com/en-us/library/azure/dn535601.aspx – Mariano Montañez Ureta Jan 11 '16 at 15:27
  • Is your storage account created in Resource Manager/Classic mode? – juvchan Jan 12 '16 at 10:46
  • Which specific nuget and nuget version you're using for Azure storage account management? – juvchan Jan 12 '16 at 10:47
  • Was created in Resource Manager mode. Im using VS 2013, Nuget 2.8.6, Azure Storage 6.2 – Geter Moura Jan 12 '16 at 16:34
  • This is the url the module is using for the PUT method: https://***.blob.core.windows.net/fotosrestaurantes/google.jpg?sv=2015-04-05&sr=c&si=enviarFotoRestaurante&sig=***&comp=block&blockid=YmxvY2stMDAwMDAw – Geter Moura Jan 14 '16 at 17:46

0 Answers0