如何从 Azure Blob Storage (V2) 获取数据到 Angular 7？答案

【问题标题】：How to GET data from Azure Blob Storage (V2) into Angular 7?如何从 Azure Blob Storage (V2) 获取数据到 Angular 7？
【发布时间】：2020-11-18 00:53:28
【问题描述】：

我的存储 Blob 容器 (v2) 中有一个 csv 文件（Blob 类型：块 blob）。

我想知道如何才能将文件提取到我的 Angular 应用程序中？

目前我尝试下载 csv，将其移动到 assets 文件夹并使用 HttpClient get() 方法从那里获取并成功读取数据：

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);
          })

现在我希望能够从 Azure 本身动态地感染数据，而无需在每次生成新数据时总是手动下载它。我尝试简单地将其重命名为：

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

这自然是行不通的。所以我想知道我怎样才能得到这些数据？

【问题讨论】：

您收到的错误信息是什么？ Blob 是否可公开访问？
@GauravMantri-AIS 从源“localhost:4200”访问“https:///my-organization.csv”的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问控制” -Allow-Origin' 标头存在于请求的资源上。
您需要为 blob 服务启用 CORS 规则，以便您可以从您的 Web 应用程序向您的存储帐户进行 AJAX 调用。
更多关于 CORS 规则的信息：docs.microsoft.com/en-us/rest/api/storageservices/…。您可以在 Azure 门户中设置 CORS 规则。
@OreoFanatics 如果是这样，我建议您将容器上的访问级别设置为私有使用 sas 令牌以访问 blob：docs.microsoft.com/en-us/azure/storage/common/…。这样做之后，没有 sas 令牌的人无法访问 blob。

标签： angular rest blob httpclient azure-blob-storage

【解决方案1】：

我将解决方案总结如下。

1.如何在 Angular 应用程序中使用 rest api 访问 Azure blob

关于这个问题，您需要在存储帐户中配置一些设置

Configure CORS for Azure storage

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

配置防火墙。如果您打开存储帐户的防火墙，则需要在存储帐户的防火墙中添加您的客户端 IP。更多详情请参考document
配置 Azure blob 访问级别。关于设置，请在账户级别或容器级别进行配置。根据您的安全问题。因为你使用不同的设置，你会得到不同的结果。更多设置详情请参考here。

例如

一个。禁用存储帐户的公共读取访问权限。如果这样做，您将无法向该帐户中的所有容器和 blob 发送任何匿名请求，并且无法将容器的公共访问设置配置为允许匿名访问。您应该使用sas token 或share key 访问存储资源

b.为存储帐户启用公共读取访问权限

为容器启用公共访问级别。我们可以匿名读取 blob 的内容。
禁用容器的公共访问级别。我们需要使用sas token 或share key 读取blob 的内容。

另外，关于如何在angular应用中创建sas token，请参考my previous answer

【讨论】：