Azurite docker 图像和 CORS

Question

我正在使用 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
允许 Headers: content-type,x-ms-blob-type,x-ms-client-request-id,x-ms-version

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

Error when calling Azure Storage:'version' must be >= '2019-10-10' when providing 'x' permission.

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

Access to XMLHttpRequest at 'http://localhost:10010/devstoreaccount1/container-name/src%2F0e237853-f7a9-4dc8-b892-a0eddc2688d8?sv=2018-03-28&st=2021-06-30T15%3A03%3A48Z&se=2022-07-01T15%3A03%3A00Z&sr=c&sp=c&sig=qWHZ4wpkoVZwvJbPK0r6%2Fwf%2B5LL3kBjgEc6oFm3ikUA%3D' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

我缺少什么 setup/steps，这将使我能够将文档上传到 docker 图像中的蓝铜矿容器运行ning？

Answer 1

对于 CORS，AllowedHeaders 和 ExposedHeaders 属性中指定的值必须分别与发送和接收的 header 完全匹配。这些 header 值不匹配会导致 CORS 相关错误。

此外，根据我的经验，不同的浏览器 send/receive 不同的 header 也会导致与 CORS 相关的错误。

解决此问题的最简单方法是为 AllowedHeaders 和 ExposedHeaders 属性设置 *。这将做的是允许所有 headers，你不会得到 CORS 错误。

Azurite docker 图像和 CORS

Azurite docker image and CORS

azure-blob-storage

azure-storage-explorer

azurite