0

我正在用 C# 开发一个 Azure 函数应用程序。我正在尝试在本地运行该应用程序，并且在上传文件以与 Azurite 一起使用时遇到了很大的困难。

该应用程序有一个用 Angular 编写的前端。它利用"@azure/storage-blob": "^12.6.0"库通过以下代码将文件上传到 Azure 存储：

      private uploadFile(audioMedia: AudioMediaDto, file: File | null, storageAccessInformation: StorageAccessInformationDto): Observable<TransferProgressEvent> {
        const sub = new Subject<TransferProgressEvent>();
        if (file) {
          const url = `${env.blobStorageUri}?${storageAccessInformation.accessToken}`;
          const blobServiceClient = new BlobServiceClient(url);
          const containerClient = blobServiceClient.getContainerClient(storageAccessInformation.containerName);
          containerClient.getBlobClient(`${storageAccessInformation.uploadDirectory}/${audioMedia.id}`)
                         .getBlockBlobClient()
                         .uploadData(
                           file,
                           {
                             onProgress: (progress: TransferProgressEvent) => sub.next(progress)
                           }
                         )
                         .then(
                           () => sub.complete(),
                           () => sub.error('')
                         );
        } else {
          sub.error('');
        }
    
        return sub.asObservable();
      }

这是我的docker-compose.yaml

    version: "3.9"
    services:
      azurite:
        image: mcr.microsoft.com/azure-storage/azurite
        command: "azurite --loose --blobHost 0.0.0.0 --blobPort 10000 --queueHost 0.0.0.0 --queuePort 10001 --location /workspace --debug /workspace/debug.log"
        ports:
          - 10010:10000
          - 10011:10001
          - 10012:10002
        volumes:
          - ./azurite:/workspace
    
      frontend:
        build: frontend
        ports:
          - 4200:4200

当我运行时docker-compose up，我打开 Azure 存储模拟器并连接到我的 Azurite 实例，然后右键单击“Blob Containers”并配置如下所示的 CORS 策略：

  • 允许的来源：http://localhost:4200
  • 允许的方法：PUT、OPTIONS
  • 允许的标头：内容类型、x-ms-blob-type、x-ms-client-request-id、x-ms-version

我通过 Azure 存储资源管理器创建了一个容器，然后右键单击它并选择“获取共享访问签名...”。我将到期时间设为未来一年并选择所有权限。但是，当我单击创建时，我看到以下错误消息：

调用 Azure 存储时出错：提供“x”权限时，“版本”必须 >=“2019-10-10”。

虽然我相信这将是一个问题，但如果我当前按原样运行应用程序并尝试将文档上传到容器，我会收到以下消息：

在 'http://localhost:10010/devstoreaccount1/container-name/src%2F0e237853-f7a9-4dc8-b892-a0eddc2688d8?sv=2018-03-28&st=2021-06-30T15%3A03%3A48Z&se=2022 访问 XMLHttpRequest -07-01T15%3A03%3A00Z&sr=c&sp=c&sig=qWHZ4wpkoVZwvJbPK0r6%2Fwf%2B5LL3kBjgEc6oFm3ikUA%3D' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我可以看到我应用到容器的 CORS 设置已保存，因为当我查看./azurite/__azurite_db_blob__.json文件时，我会在其中看到以下部分： 在此处输入图像描述

我缺少哪些设置/步骤，这将使我能够将文档上传到在 docker 映像中运行的 azurite 容器？

4

1 回答 1

1

使用 CORS，在AllowedHeaders和ExposedHeaders属性中指定的值必须与分别发送和接收的标头完全匹配。这些标头值不匹配将导致与 CORS 相关的错误。

此外，根据我的经验，不同的浏览器发送/接收不同的标头，这也会导致与 CORS 相关的错误。

解决此问题的最简单方法是同时设置*和AllowedHeaders属性ExposedHeaders。这将做的是允许所有标题，并且您不会收到 CORS 错误。

于 2022-01-18T14:23:00.610 回答