How to GET data from Azure Blob Storage (V2) into Angular 7?

Question

I have a csv file (Blob type: Block blob) in my Storage Blob container (v2).

I am wondering how can I be able to fetch the file into my Angular app?

Currently I tried to download the csv, move it into assets folder and fetch from there using HttpClient get() method and successfully read the data:

this.http.get('assets/my-organization.csv', {responseType: 'text'})
          .subscribe(data => {
            let csvToRowArray = data.split("\n");
            for (let index = 1; index <csvToRowArray.length - 1; index++) {
              let row = csvToRowArray[index].split(";");
              this.orgArray.push(new Organizatio(row[0],row[1], row[2], row[3]));
            }
            console.log(this.orgArray);
          })

Now I would like to be able to fecth the data dynamically from Azure itself without the need to always manually download it everytime a new data generated. I tried simply renaming it into:

this.http.get('https://<my_azure_storage_url>/my-organization.csv', {responseType: 'text'})

This naturally won't work. So I wonder how can I get these data?

Answer 1

I summarize the solution as below.

1. How to access Azure blob with rest api in angular application

Regarding the issue, you need to configure some settings in the storage account

1. Configure CORS for Azure storage

Allowed origins: *
Allowed verbs: DELETE,GET,HEAD,MERGE,POST,OPTIONS,PUT
Allowed headers: *
Exposed headers: *
Maximum age (seconds): 86400

2. Configure firewall. If you open the storage account's firewall, you need to add your client IP in the storage account's firewall. For more details, please refer to the document

3. Configure Azure blob access level. Regarding the setting, please configure it on the account level orcontainer level. according to your security concerns. Because you use different settings, you will get different results. For more details about the setting, please refer to here.

For example

a. Disable public read access for a storage account. If you do that, you cannot send any anonymous request to all containers and blobs in that account and cannot configure the public access setting for a container to permit anonymous access. you should access the storage resource with sas token or share key

b. Enable public read access for a storage account

• Enable public access level for a container. we can read blob's content anonymously.

• Disable public access level for a container. We need to read blob's content with sas token or share key.

Besides, regarding how to create sas token in angular application, please refer to my previous answer