无法访问 SwaggerUIBundle url 列表中的 Azure blob SAS uri

Question

我正在尝试创建 SwaggerUIBundle，其中 url 将是 Azure Blob 存储容器文件。出于测试目的，我在 index.jsp 文件中像这样对 url 进行了硬编码：

      // Begin Swagger UI call region
  const ui = SwaggerUIBundle({
      urls: [
          {url: "https://backendsa.blob.core.windows.net/swagger-consolidation/*****", name: "SwaggerConsolidation"},
          {url: "https://backendsa.blob.core.windows.net/swagger-consolidation/*****2", name: "SwaggerConsolidation2"},
        ],
    dom_id: '#swagger-ui',
    deepLinking: true,
    spec: location.host,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  })
  // End Swagger UI call region

这些 url 指向 Azure Blob 存储文件的 SAS url，并且在打开网络时可以访问。但是当我部署代码时，它给出了以下错误：

Fetch error
NetworkError when attempting to fetch resource. https://backendsa.blob.core.windows.net/swagger-consolidation/*****
Fetch error
Possible cross-origin (CORS) issue? The URL origin (https://backendsa.blob.core.windows.net) does not match the page (https://router-sc.dev-wus.digitalservices.com). Check the server returns the correct 'Access-Control-Allow-*' headers.

对该问题的任何见解都会有所帮助。

Answer 1

根据您提供的错误，您需要在Azure blob中配置CORS。因为 swager UI 应用程序是一个 SPA 应用程序。当我们在应用程序中从与您的网站不同的域调用其余 api 时，我们将遇到 CORS 问题。关于如何配置，请参考docuemnt.

例如

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

无法访问 SwaggerUIBundle url 列表中的 Azure blob SAS uri

Unable to access Azure blob SAS uri in SwaggerUIBundle url list

swagger

swagger-ui

azure-blob-storage

shared-access-signatures