Attaching headers to files coming from Azure Static Web Apps

Question

I am trying to evaluate some software in a Vue.js application that is on Azure Static Web Apps and I'm getting some errors in the console in Chrome.

Your server has not been configured to serve WebAssembly threads. See https://docs.apryse.com/documentation/web/faq/wasm-threads for instructions on how to resolve this.

The Apryse documentation says to add the following headers

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

There may be some degradation of performance. Your server has not been configured to serve .gz. and .br. files with the expected Content-Encoding. See https://docs.apryse.com/documentation/web/faq/content-encoding/ for instructions on how to resolve this.

The Apryse documentation says

The goal is to serve files within WebViewer containing ".gz." in their file name with "Content-Encoding: gzip" and files containing ".br." in their file name with "Content-Encoding: br".

I have tried updating the globalHeaders in the staticwebapp.config.json but this breaks other software that is used within the app.

{
    "navigationFallback": {
        "rewrite": "/index.html",
        "exclude": ["/images/*.{png,jpg,gif}","/css/*"]
    },
    "globalHeaders": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, OPTIONS, HEAD",
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp"
    }
}

I have tried other configurations on the individual files and filetypes but they have not worked either. How can this be fixed?

{
    "navigationFallback": {
        "rewrite": "/index.html",
        "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
    },
    "globalHeaders": {
        "Access-Control-Allow-Origin":"*",
        "Access-Control-Allow-Methods": "GET, OPTIONS, HEAD",
        "Referrer-Policy": "strict-origin-when-cross-origin"
    },
    "routes": [
        {
            "route": "/public/vendor/webviewer/*",
            "headers": {
                "Cross-Origin-Opener-Policy": "same-origin",
                "Cross-Origin-Embedder-Policy": "require-corp"
            }
        },
        {
            "route": "/vendor/webviewer/*",
            "headers": {
                "Cross-Origin-Opener-Policy": "same-origin",
                "Cross-Origin-Embedder-Policy": "require-corp"
            }
        }
    ]
}

Answer 1

Hii @Tom,

Thank you for reaching out to Microsoft Q&A.

 The issue you are encountering is due to platform-level limitations in Azure Static Web Apps (SWA) when working with advanced browser features such as WebAssembly threads and pre-compressed assets. Apryse WebViewer requires the application to be cross-origin isolated in order to enable WebAssembly threads, which depends on the HTTP response headers Cross-Origin-Opener-Policy (COOP) and Cross-Origin-Embedder-Policy (COEP).

 While Azure Static Web Apps allows configuring these headers using staticwebapp.config.json, they are enforced at the top-level document scope (for example, index.html). In a Single Page Application (SPA), applying these headers globally can cause conflicts with other libraries or third‑party services that rely on cross‑origin access, which explains why other parts of your application break when these headers are enabled globally.

Additionally, Azure Static Web Apps does not support explicitly serving pre-compressed .gz or .br files with custom Content-Encoding headers. Compression is handled internally by Azure’s edge infrastructure, and the platform does not allow overriding or forcing Content-Encoding based on file names. As a result, even if .gz or .br files are present in your application, Azure Static Web Apps may ignore them or recompress assets automatically. This behavior is by design and cannot be changed through configuration, which leads to the warnings shown by Apryse regarding content encoding.

 Please refer below options to resolve this issue or as workarounds:

 Option 1: Disable WebAssembly threads in Apryse (recommended quick workaround)
If multi-threaded WebAssembly performance is not critical, you can disable WASM threads in Apryse WebViewer. This avoids the need for COOP/COEP headers and prevents conflicts with other libraries in your SPA.

const viewer = await WebViewer(
  {
    enableWebAssembly: true,
    useWasmThreads: false
  },
  element
);

This approach is suitable for evaluations or scenarios where stability is preferred over maximum performance.

 Option 2: Isolate WebViewer into a separate route or entry point
Host WebViewer under a dedicated route or separate HTML page (for example, /viewer/index.html) and apply Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers only to that route. The page that loads WebViewer must itself receive these headers, allowing WebViewer to run in a cross-origin isolated context without impacting the rest of the SPA.

Option 3: Host WebViewer assets on a different Azure service (recommended for production)
Move the WebViewer lib or vendor assets to a service such as Azure App Service, Azure Blob Storage with CDN, or Azure Front Door. These services support proper handling of Content-Encoding: gzip and Content-Encoding: br and allow full control over response headers. Your main Vue.js application can continue to be hosted on Azure Static Web Apps.

Option 4: Avoid using pre-compressed .gz / .br assets
Since Azure Static Web Apps cannot guarantee correct Content-Encoding headers for pre-compressed files, relying on SWA’s built-in compression instead of shipping .gz or .br files can suppress these warnings, with a possible performance trade-off.

 From this Configure Azure Static Web Apps | Microsoft Learn document, Azure Static Web Apps supports only routes, headers, MIME types, authentication, and navigation fallback in staticwebapp.config.json, it does not support setting Content-Encoding or explicitly serving pre‑compressed .gz / .br files

 According to this Github issue: Static files not served compressed · Issue #714 · Azure/static-web-apps 

Azure Static Web Apps applies compression automatically only for select MIME types and does not reliably support serving pre‑compressed .gz / .br files, which is a known platform limitation 

If the answer is helpful,  Please do click "Accept the answer” and Yes, this can be beneficial to other community members.

If you have any other questions, let me know in the "comments" and I would be happy to help you