Setup Headers

Strapkit needs your page to be cross-origin isolated so the runtime can use SharedArrayBuffer. Without it, the runtime won't start — you'll see an error in the console and init() will reject.

Required headers

Send these two response headers on every HTML document that loads Strapkit:

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

Both are required. Missing or misconfigured headers are by far the most common reason Strapkit fails to load.

Why

The Node runtime uses worker threads to do real work in parallel. Those workers communicate through SharedArrayBuffer, which browsers only expose to pages that have opted into cross-origin isolation. The two headers above are how you opt in.

Configuring your host

Next.js

Add a headers() function to next.config.js:

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' },
          { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
        ],
      },
    ];
  },
};

Vercel

Add to vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" },
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" }
      ]
    }
  ]
}

Netlify

Add to netlify.toml:

[[headers]]
  for = "/*"
  [headers.values]
    Cross-Origin-Embedder-Policy = "require-corp"
    Cross-Origin-Opener-Policy = "same-origin"

Cloudflare Pages

Add a _headers file at the root of your site:

/*
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin

nginx

add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;

Verifying it works

Open your page and run this in the DevTools console:

self.crossOriginIsolated  // → true

If it's true, Strapkit will boot. If it's false, double-check the response headers in the Network tab — they need to be on the HTML document itself, not just on assets.

Scoping to one route

If you only run Strapkit on one page, you can apply the headers to that route only — the rest of your site stays free of the cross-origin isolation constraints. Every host config above supports a path pattern; swap /(.*) or /* for the specific route (e.g. /playground) and the headers only land there.