问题描述
我正在尝试创建 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.
对此问题的任何见解都会有所帮助。
解决方法
根据你提供的错误,需要在Azure blob中配置CORS。因为 swaager UI 应用程序是一个 SPA 应用程序。当我们在应用程序中从与您的网站不同的域调用其余 api 时,我们将遇到 CORS 问题。关于如何配置,请参考docuemnt。
例如
Allowed origins: *
Allowed verbs: DELETE,GET,HEAD,MERGE,POST,OPTIONS,PUT
Allowed headers: *
Exposed headers: *
Maximum age (seconds): 86400