3 Comments

So now that CORS is available for Azure Storage, how do I set it up? There is no UI in the Azure portal to just enable it, so basically you have to code it yourself, if you don’t feel like it you can go to my github and grab it. For now it does not do much, but it’s a fast and easy way to enable CORS on a storage.

So what’s CORS got to do with it

Well basically without CORS your website server would have to act as a proxy for the upload you are trying to make in the storage(every file is uploaded to your web server and then your web server will send then file in storage). It’s not that bad until you realize that, what if I have lots (like so many) users that are uploading at the same time some very large files, how will you have to scale up your servers in order to both support the very large upload and to continue to deliver pages and functionality? With CORS you don’t have to worry about that! Once CORS is permitted on the storage, the client (the browser), can upload directly in the storage. It’s that easy…..well on paper it is, but I’m pretty sure that if you have a storage account and have created a blob container, it’s most probably private, therefore there is no way to upload in it from a browser (more on that in the next part of the series).

In order to enable CORS you must have a rule that states at least

  • who is allowed (the origin of the request)
  • what is allowed (the HTTP verbs)
  • how long before the browser should ask again (in seconds)

 

How it works

Usually when a browser needs to work with another domain than the one the page was loaded from 2 actions will happen:

  1. Preflight request (HTTP OPTIONS)
  2. The actual request (if preflight was successful)

 

Huh Preflight ?!?!

The browser sends a request to the server using the HTTP OPTIONS with the actual headers and the domain issuing the request (the origin), the server will then evaluate the operation from the verb and the headers, if CORS is enabled and there is a rule that match, then the server will send a 200 and the actual request will be executed otherwise it will send out a 403 denying the operation (with a nice message also…how sweet!!).

Capture-Cors

 

OK got it, now what

Like I mentioned earlier in this post, you can easily enable CORS with this app (console for now). Here is a basic walkthrough of the code and what it does (using version 3.0 of the Azure SDK):

public void EnableBlobCors()
{
    var cred = new StorageCredentials(corsConfig.AccountName, corsConfig.AccountKey);
    var storageAccount = new CloudStorageAccount(cred, true);
    var blobClient = storageAccount.CreateCloudBlobClient();
    ConfigureCors(blobClient);
}

private void ConfigureCors(CloudBlobClient blobClient)
{
    var serviceProperties = new ServiceProperties
    {
        HourMetrics = null,
        MinuteMetrics = null,
        Logging = null
    };

    AddCorsRule(serviceProperties);
    blobClient.SetServiceProperties(serviceProperties);
}

private void AddCorsRule(ServiceProperties serviceProperties)
{
    serviceProperties.Cors = new CorsProperties();
    serviceProperties.Cors.CorsRules.Add(new CorsRule()
    {
        //collection of allowed headers
        AllowedHeaders = this.corsConfig.AllowedHeaders,
        
        //don't forget HEAD and OPTIONS otherwise preflight will fail
        AllowedMethods = CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Post | CorsHttpMethods.Options,
        //collection of allowed origin or "*"
        AllowedOrigins = this.corsConfig.AllowedOrigins,
        ExposedHeaders = this.corsConfig.ExposedHeaders,
        MaxAgeInSeconds = this.corsConfig.MaxAge
    });
}

So in an Azure class, I will get a reference to my Blob client and from there I will proceed to create a new service properties by setting the metrics to null I will not overwrite the existing metrics already in place. I then create a new CorsRule with the given value I want enable. the AllowedOrigin is where I would specify which domain can work with my storage and the AllowedMethods specifies which HTTP Verbs are allowed. HEAD and OPTIONS are added otherwise some preflight may fail.

 

In the next post we will be looking at how we can easily upload files to our storage once CORS has been enabled using AngularJS (because I like it) and HTML5 first we need to understand Shared Access Signature (SAS) and the REST API.

Comments

Comment by Just Code It

So you want to upload in Azure storage from a browser do you !! Here is my how to

So you want to upload in Azure storage from a browser do you !! Here is my how to

Comment by Woodrow Walterman

naturally like your website but you have to check the spelling on quite a few of your posts. Many of them are rife with spelling issues and I to find it very bothersome to tell the reality nevertheless I'll definitely come again again.

Woodrow Walterman
Comment by Debbi Altum

hi!,I love your writing very much! proportion we keep in touch more about your post on AOL? I require an expert on this space to unravel my problem. Maybe that's you! Looking forward to see you.

Debbi Altum