Unable to access Azure blob SAS uri in SwaggerUIBundle url list

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.

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