Unable to access Azure blob SAS uri in SwaggerUIBundle url list

Question

I'm trying to create SwaggerUIBundle where the urls will be of Azure Blob Storage container files. For testing purpose I have hard coded the urls in here like this in my index.jsp file:

      // 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

These urls are pointing SAS urls for Azure Blob Storage files and are accessible while hitting in open network. But while I deploy the code it gives below error :

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.
 

Any insight over the issue would be helpful.

Answer 1

According to the error you provide, you need to configure CORS in Azure blob. Because the swaager UI application is a SPA application. when we call the rest api from a domain different from your website in the application, we will get CORS issue. Regarding how to configure it, please refer to the docuemnt.

For example

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