2

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?

OreoFanatics
  • 818
  • 4
  • 15
  • 32
  • What's the error message you're getting? Is the blob publicly accessible? – Gaurav Mantri Jul 28 '20 at 15:24
  • @GauravMantri-AIS Access to XMLHttpRequest at 'https:///my-organization.csv' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. – OreoFanatics Jul 28 '20 at 15:34
  • You will need to enable CORS rules for blob service so that you can make AJAX calls from your web application to your storage account. – Gaurav Mantri Jul 28 '20 at 15:37
  • More on CORS rules here: https://learn.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services. You can set the CORS rules in Azure Portal. – Gaurav Mantri Jul 28 '20 at 15:38
  • @GauravMantri-AIS I now received 403 error: `GET (This request is not authorized to perform in this operation)` – OreoFanatics Jul 29 '20 at 15:31
  • Please ensure that your storage account is not behind a firewall. – Gaurav Mantri Jul 29 '20 at 15:40
  • @GauravMantri-AIS There is company firewall that being placed here. Is there any workaround to that? – OreoFanatics Jul 29 '20 at 16:50
  • Sorry, I meant firewall in Azure. Is your storage account behind a firewall in Azure? You would need to add the client’s IP in Azure Firewall to allow access. – Gaurav Mantri Jul 29 '20 at 16:55
  • @GauravMantri-AIS Which client IP do you mean? – OreoFanatics Jul 29 '20 at 17:32
  • @OreoFanatics Could you please check you Azure storage account firewall(https://learn.microsoft.com/en-us/azure/storage/common/storage-network-security) and your storage access level(https://learn.microsoft.com/en-us/azure/storage/blobs/anonymous-read-access-configure?tabs=portal) – Jim Xu Jul 30 '20 at 01:52
  • @JimXu I checked and the access level "Blob public access" is already set to `enabled`. For the firewall, my IP is already listed there (otherwise I won't be able to look into the files). Is there any specific configuration needed to let my Angular app be able to access the data inside Blob Storage? – OreoFanatics Jul 30 '20 at 12:29
  • @OreoFanatics Is that you still cannot access blob in your angular application? Could you please try to access the blob via browser? – Jim Xu Jul 31 '20 at 00:50
  • @JimXu if I tried to access it with incognito browser then I will receive the following error: `This XML file does not appear to have any style information associated with it. The document tree is shown below. ResourceNotFound The specified resource does not exist. RequestId:6de474ba-f01e-0058-5408-679d2e000000 Time:2020-07-31T07:03:43.9344782Z ` – OreoFanatics Jul 31 '20 at 07:05
  • @OreoFanatics According to the error, you cannot directly access blob and you need to do auth. Could you please check the access level on your container : https://learn.microsoft.com/en-us/azure/storage/blobs/anonymous-read-access-configure?tabs=portal#set-the-public-access-level-for-a-container? – Jim Xu Jul 31 '20 at 07:17
  • @JimXu I am setting it to `Blob` and now it works like a charm. Thank you. However regarding security concerns, is there any additional steps to make sure no unauthorized access be able to access the file? – OreoFanatics Jul 31 '20 at 08:52
  • @OreoFanatics Is that you want to prevent unauthorized access? – Jim Xu Jul 31 '20 at 09:14
  • 1
    @OreoFanatics If so, I suggest you set access level on your container to private the use sas token to access blob : https://learn.microsoft.com/en-us/azure/storage/common/storage-sas-overview. After doing that, the people who do not have the sas token cannot access blob. – Jim Xu Jul 31 '20 at 09:18
  • @OreoFanatics Do you have any other concerns? If you have no other concerns, could I post it as a answer? – Jim Xu Aug 06 '20 at 07:06
  • @JimXu yes sure – OreoFanatics Aug 11 '20 at 11:55

1 Answers1

0

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

  1. 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

  2. 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

Jim Xu
  • 21,610
  • 2
  • 19
  • 39
  • Jim Xu I want to download file from Azure Blob from an angular application using sas token. I tried to find a solution but couldn't. Could you please help out? – pix1289 Mar 01 '23 at 07:36