Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set CORS in Azure BLOB Storage in Portal?

We have a blob storage on Windows Azure.

http://mytest.blob.core.windows.net/forms 

I uploaded a few files to the storage using CloudBerry. And I can download the files by browsers successfully. These files are simple text files, but with different file extensions. For example,

http://mytest.blob.core.windows.net/forms/f001.etx 

I want to download the files via jquery ($.get), however, it failed because of CORS.

How can I configure CORS in Azure BLOB Storage in Portal?

And, should I do something for CORS in the client side too?

like image 614
Zach Avatar asked Mar 06 '15 08:03

Zach


People also ask

How do you add access-control-allow-Origin header in azure?

On the Azure Portal, navigate to your Web App. Navigate to API > CORS. There is now a checkbox for Enable Access-Control-Allow-Credentials . Check this box and press Save .

What type of file is CORS rule in azure storage?

The Cors rule in azure storage is a JSON file.


2 Answers

This is possible to do now directly in the portal fortunately. If you just select the account, you will see the menu with various options and CORS will be one of them for each of the services Blob, File, etc.

enter image description here enter image description here

like image 159
Ilya Chernomordik Avatar answered Oct 12 '22 03:10

Ilya Chernomordik


UPDATE: At the time of this answer the Azure Portal did not have this feature. It does now as outlined here. The following outlines the way to do this before the UI was added.

How can I configure CORS in Azure BLOB Storage in Portal?

If you want you can always set the CORS rules for blob storage programmatically. If you're using .Net Storage Client library, check out this blog post from storage team: http://blogs.msdn.com/b/windowsazurestorage/archive/2014/02/03/windows-azure-storage-introducing-cors.aspx. Code for setting CORS setting from that blog post:

private static void InitializeCors() {      // CORS should be enabled once at service startup      // Given a BlobClient, download the current Service Properties       ServiceProperties blobServiceProperties = BlobClient.GetServiceProperties();      ServiceProperties tableServiceProperties = TableClient.GetServiceProperties();       // Enable and Configure CORS      ConfigureCors(blobServiceProperties);      ConfigureCors(tableServiceProperties);       // Commit the CORS changes into the Service Properties      BlobClient.SetServiceProperties(blobServiceProperties);      TableClient.SetServiceProperties(tableServiceProperties); }  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,         AllowedOrigins = new List<string>() { "*" },         ExposedHeaders = new List<string>() { "*" },         MaxAgeInSeconds = 1800 // 30 minutes      }); } 

If you're looking for a tool to do the same, a few storage explorers have support for configuring CORS - Azure Storage Explorer, Cerebrata Azure Management Studio, Cloud Portam (Disclosure - I'm building Cloud Portam utility).

Once the CORS is configured properly, you can use the code mentioned in Rory's answer to download the file from blob storage. You don't have to do anything special on the client side as mentioned by Rory.

like image 31
Gaurav Mantri Avatar answered Oct 12 '22 04:10

Gaurav Mantri