蓝铜矿 docker 图像和 CORS

Question

我正在 C# 中开发 Azure function 应用程序。 我正在尝试在本地运行该应用程序，并且在上传文件以与 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”并配置如下所示的 Z5A8FEFF0B4BDE3EEC9244B76023B79 策略

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

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

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

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

访问 XMLHttpRequest 在 'http://localhost:10010/devstoreaccount1/container-name/src%2F0e237853-f7a9-4dc8-b892-a0eddc2688d8?sv=2018-03-28&st=202301-06-348Zse=5% -07-01T15%3A03%3A00Z&sr=c&sp=c&sig=qWHZ4wpkoVZwvJbPK0r6%2Fwf%2B5LL3kBjgEc6oFm3ikUA%3D' 来自来源 'http://localhost:4200' 已被 CORS 阻止通过预访问控制的请求： ：请求的资源上不存在“Access-Control-Allow-Origin”header。

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

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

Answer 1

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

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

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