Microsoft Azure云存储上的Cors错误

Question

Hello I am having a Cors Error on Microsoft Azure Cloud Storage.

I am generating my SAS as follows:

public SAS(string containername, string id, SharedAccessBlobPermissions permissions)
{
    this.id = id;
    CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("StorageConnectionString"));
    CloudBlobContainer containerReference = cloudStorageAccount.CreateCloudBlobClient().GetContainerReference("teeessssttt");
    if (containerReference.CreateIfNotExists(null, null))
    {
        BlobConfig.configureCORS();
    }
    CloudBlockBlob blockBlobReference = containerReference.GetBlockBlobReference(id);
    SharedAccessBlobPolicy sharedAccessBlobPolicy = new SharedAccessBlobPolicy()
    {
        Permissions = permissions
    };
    DateTime utcNow = DateTime.UtcNow;
    sharedAccessBlobPolicy.SharedAccessStartTime = new DateTimeOffset?(utcNow.AddMinutes(-5));
    DateTime dateTime = DateTime.UtcNow;
    sharedAccessBlobPolicy.SharedAccessExpiryTime = new DateTimeOffset?(dateTime.AddMinutes(15));
    string sharedAccessSignature = blockBlobReference.GetSharedAccessSignature(sharedAccessBlobPolicy);
    this.HostingSite = blockBlobReference.Uri.AbsoluteUri;
    this.Token = sharedAccessSignature;
    this.fullurl = string.Concat(this.HostingSite, this.Token);
}

This generates something like:

{"fullurl":"https://ingenovatebeta.blob.core.windows.net/teeessssttt/7554eb72-f361-4715-a255-a5d6922706b0?sv=2013-08-15&sr=b&sig=iVL4zeytgC1H7W09lV2YZspOKlzF433oqsx9I6cfI68%3D&st=2014-10-24T05%3A58%3A13Z&se=2014-10-24T06%3A18%3A13Z&sp=w","HostingSite":"https://ingenovatebeta.blob.core.windows.net/teeessssttt/7554eb72-f361-4715-a255-a5d6922706b0","id":"7554eb72-f361-4715-a255-a5d6922706b0","Token":"?sv=2013-08-15&sr=b&sig=iVL4zeytgC1H7W09lV2YZspOKlzF433oqsx9I6cfI68%3D&st=2014-10-24T05%3A58%3A13Z&se=2014-10-24T06%3A18%3A13Z&sp=w"}

I am setting up my cors as follows:

CorsRule corsRule = new CorsRule();
corsRule.AllowedOrigins.Add("https://---------------.com");
corsRule.AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Post | CorsHttpMethods.Put |           
CorsHttpMethods.Options;
corsRule.AllowedHeaders.Add("*");
corsRule.ExposedHeaders.Add("*");
corsRule.MaxAgeInSeconds = (int)TimeSpan.FromDays(5).TotalSeconds;
corsRules.Add(corsRule);
serviceProperty.Cors = corsProperty;

This works when I upload files just to the GUID. For example setting my upload URI like the following works:

$.get("/api/sas", (function (json) {    
    var baseUrl = json.fullurl;                                  
    myDropzone.options.url = baseUrl;
    myDropzone.processFile(file);
}));

However all my files end up in my cloud storage as just the GUID's and no file names or extensions this makes it hard to retrieve the images and such. In the examples the show you can add a filename. I have followed the examples:

$.get("/api/sas", (function (json) {

    var baseUrl = json.fullurl;
    var indexOfQueryStart = baseUrl.indexOf("?");
    submitUri = baseUrl.substring(0, indexOfQueryStart) + '/' + file.name + baseUrl.substring(indexOfQueryStart);

    myDropzone.options.url = submitUri;
    myDropzone.processFile(file);
 }));

However it does not work. At this point I get a CORS error:

XMLHttpRequest cannot load https://myurl/mycontainer/82b7f14b-ee7c-45a3…2B%2BmtAJw%3D&st=2014-10-23T04%3A34%3A22Z&se=2014-10-23T04%3A54%3A22Z&sp=w. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stagingrapidrealities.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 403. ​

Answer 1

I think I know what's happening. Basically there's nothing wrong with your CORS Settings. They are perfectly fine. The problem is with your SAS.

What is happening is that you're creating a SAS on the blob (blob's name is 7554eb72-f361-4715-a255-a5d6922706b0 ). What that means is that the signature computed includes this blob name. Then when you are uploading the file you're changing the blob name by appending file name ( clown.jpg ) to the URL. This essentially made SAS signature invalid and thus you're getting 403 error.

There are two ways by which you can fix this issue:

1. Calculate SAS on blob based on the actual file which you're uploading : In this case, when a user selects a file in your application, you pass the blob name to your server and let it return the SAS URL for that file back and you use just that. This is the reason your code worked when you're uploading files using GUID.
2. Calculate SAS on the container : Instead of computing SAS on the blob, you do it on the container instead of a blob. The process remains the same. The difference you will notice is in the SAS URL where sr would be c (meaning container) instead of b (meaning blob). Then you would use the same approach for deriving the submitUrl (ie finding the index of ? and inserting file name there).

My recommendation would be to go with #2 because it would result in lesser calls to your server. On your upload page, you just calculate SAS on container just once and then keep on inserting file names as and when a user selects a file and upload them. In fact we're using this approach in one of the products I'm working on.