Blob存储上的CORS错误

Question

Hi I am trying to develop a file Upload mechanism to Azure blob storage following THIS EXAMPLE , but I am encountering problems with CORS. I have set a sample upload Container. I had also enabled CORS for the blob storage (or at least that's what I think since this following code didn't give me any errors):

var blobServiceProperties = AzureStorage.Default.BlobClient.GetServiceProperties();
            ConfigureCors(blobServiceProperties);
            AzureStorage.Default.BlobClient.SetServiceProperties(blobServiceProperties);

In the code above the AzureStorage.Default.BlobClient object is a Lazy instantiation of my Blob Client. The ConfigureCors method is defined as following:

private static void ConfigureCors(ServiceProperties serviceProperties)
    {            
        serviceProperties.Cors = new CorsProperties();            
        serviceProperties.Cors.CorsRules.Add(new CorsRule()
        {
            AllowedHeaders = new List<string>() { "*" },
            AllowedMethods = CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Post | CorsHttpMethods.Delete,
            AllowedOrigins = new List<string>() { 
                "https://localhost:444",
                "https://xxx.yyy.com" 
            },               
            ExposedHeaders = new List<string>() { "*" },
            MaxAgeInSeconds = 1800 // 30 minutes
        });             
    }

Which should work, since I have already successfully set CORS for Table service using the following code:

var serviceProperties = AzureStorage.Default.TableClient.GetServiceProperties();
ConfigureCors(serviceProperties);
AzureStorage.Default.TableClient.SetServiceProperties(serviceProperties);

and I am using the Azure REST API to perform operations on Table Service without problems. I had also debugged the execution of the C# code while setting the CORS properties and the URL points correctly to my Azure service on the cloud (not the development storage). My first question is:

When I try to upload the blocks of a file, following the sample I had linked previosly, I get this error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://myaccount.blob.core.windows.net/upload-73cca078-9a57-4fd4-a5b9-8012a8bb56bf?sv=2014-02-14&sr=c&si=BlobContainer&sig=mysignature&comp=block&blockid=YmxvY2stMDAwMDAw. This can be fixed by moving the resource to the same domain or enabling CORS.

Chrome console also says:

XMLHttpRequest cannot load https://myaccount.blob.core.windows.net/upload-73cca078-9a57-4fd4-a5b9-8012…6mwSBkT67KIJFrTmwpSNN9slSAq0rbiLxRc%3D&comp=block&blockid=YmxvY2stMDAwMDAw. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:444' is therefore not allowed access

Which I don't understand since I had already enabled it. My web app is running on localhost, port 444, on https.

The XHR Request is as follows:

function commitBlockList() {
        var uri = submitUri + '&comp=blocklist';
        console.log(uri);
        var requestBody = '<?xml version="1.0" encoding="utf-8"?><BlockList>';
        for (var i = 0; i < blockIds.length; i++) {
            requestBody += '<Latest>' + blockIds[i] + '</Latest>';
        }
        requestBody += '</BlockList>';
        console.log(requestBody);
        $.ajax({
            url: uri,
            type: "PUT",
            data: requestBody,
            beforeSend: function (xhr) {
                xhr.setRequestHeader('x-ms-blob-content-type', selectedFile.type);
                xhr.setRequestHeader('Content-Length', requestBody.length);

                xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");
                xhr.setRequestHeader("x-ms-date", "Mon, 18 Aug 2014 13:05:21 GMT");
                xhr.setRequestHeader("x-ms-version", "2012-02-12");
                xhr.setRequestHeader("Authorization", "SharedKey myaccount:d3gXfj6kSp4qVejioDjKQA7dbPyFerDf2iw47RcmGXM=");
            },
            success: function (data, status) {
                console.log(data);
                console.log(status);
            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log(desc);
                console.log(err);
            }
        });

    }

EDIT: I have edited this post after adding some headers to the XHR request so that the 'signature error' is no longer there. The CORS error still persists, though.

But, if I create a file and upload it using a web API controller (all server side, see code below) it works without problems:

[HttpGet]
        public void Test1() {
            PutBlob("upload-73cca078-9a57-4fd4-a5b9-8012a8bb56bf", "test.txt");
        }

        public string CreateAuthorizationHeader(string canonicalizedstring)
        {
            var key = "mykey";
            string signature = string.Empty;
            using (System.Security.Cryptography.HMACSHA256 hmacSha256 = new System.Security.Cryptography.HMACSHA256(Convert.FromBase64String(key)))
            {
                Byte[] dataToHmac = System.Text.Encoding.UTF8.GetBytes(canonicalizedstring);
                signature = Convert.ToBase64String(hmacSha256.ComputeHash(dataToHmac));
            }
            string authorizationHeader = string.Format(CultureInfo.InvariantCulture, "{0} {1}:{2}", "SharedKey", "myaccount", signature);
            return authorizationHeader;
        }

        public void PutBlob(String containerName, String blobName)
        {
            String requestMethod = "PUT";

            String urlPath = String.Format("{0}/{1}", containerName, blobName);

            String storageServiceVersion = "2012-02-12";

            String dateInRfc1123Format = DateTime.UtcNow.ToString("R", CultureInfo.InvariantCulture);

            String content = "my test string";
            UTF8Encoding utf8Encoding = new UTF8Encoding();
            Byte[] blobContent = utf8Encoding.GetBytes(content);
            Int32 blobLength = blobContent.Length;

            const String blobType = "BlockBlob";

            String canonicalizedHeaders = String.Format(
                    "x-ms-blob-type:{0}\nx-ms-date:{1}\nx-ms-version:{2}",
                    blobType,
                    dateInRfc1123Format,
                    storageServiceVersion);
            String canonicalizedResource = String.Format("/{0}/{1}", "citaviweb", urlPath);
            String stringToSign = String.Format(
                    "{0}\n\n\n{1}\n\n\n\n\n\n\n\n\n{2}\n{3}",
                    requestMethod,
                    blobLength,
                    canonicalizedHeaders,
                    canonicalizedResource);
            String authorizationHeader = CreateAuthorizationHeader(stringToSign);

            Uri uri = new Uri(AzureStorage.Default.BlobClient.BaseUri + urlPath);
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(uri);
            request.Method = requestMethod;
            request.Headers.Add("x-ms-blob-type", blobType);
            request.Headers.Add("x-ms-date", dateInRfc1123Format);
            request.Headers.Add("x-ms-version", storageServiceVersion);
            request.Headers.Add("Authorization", authorizationHeader);
            request.ContentLength = blobLength;

            using (Stream requestStream = request.GetRequestStream())
            {
                requestStream.Write(blobContent, 0, blobLength);
            }

            using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
            {
                String ETag = response.Headers["ETag"];
            }
        }

Answer 1

Please make sure you are waiting for 30 seconds after you set container permissions to make sure your changes took effect and the SAS generated using the policy ID is valid.

Also, your code first checks if the policy ID exists and does not update it if it already does. SAS tokens generated with that ID will stop working 1 day after you first added that policy, because it will never update the policy with a new expiration date/time.

Answer 2

Ok it seems that I had to add the blob reference to the URI when making the PUT API call to Azure.

var getUploadContainerUrl = function (file) {            
            var usad = config.accessData.blob;
            var url = usad.uri + "/" + file.name + usad.sharedAccessSignature;
            return url;
        }

my submitUri javascript variable was then retrieved like so

submitUri = getUploadContainerUrl(file)

where file is the file being uploaded. I did not include the file.name property in the url path. The error I got was anyway misleading because it referred to CORS, which instead was correctly enabled.