vite-plugin-cross-origin-isolation

0.1.6 verified Mon Apr 27 auth: no javascript

A Vite plugin (v0.1.6, actively maintained) that enables cross-origin isolation for the Vite dev server by setting the required COOP and COEP headers. This is necessary for using SharedArrayBuffer and other APIs that require a cross-origin isolated context, such as performance.measureMemory(). The plugin is lightweight and easy to use, simply adding it to the Vite plugins array. It is specifically designed for development environments; for production, server-level configuration is still needed. It is the go-to solution for Vite projects needing SharedArrayBuffer support during development.

Common errors

error SharedArrayBuffer is not defined ↓

cause Cross-origin isolation headers missing in the response.

fix

Add the plugin to your Vite config: import crossOriginIsolation from 'vite-plugin-cross-origin-isolation' and include crossOriginIsolation() in plugins.

error Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin ↓

cause A cross-origin resource is blocked due to Cross-Origin-Embedder-Policy: require-corp.

fix

Update the external resource server to include 'Cross-Origin-Resource-Policy: cross-origin' header or proxy the resource through your own domain.

Warnings

gotcha The plugin only sets headers for the dev server; production builds require server-level configuration (e.g., nginx) to send COOP/COEP headers. ↓

fix Configure your production server to send 'Cross-Origin-Opener-Policy: same-origin' and 'Cross-Origin-Embedder-Policy: require-corp'.

gotcha Cross-origin isolation may break cross-origin resource loading (e.g., images, scripts from CDNs) unless they send appropriate CORS headers. ↓

fix Ensure all external resources include 'Cross-Origin-Resource-Policy: cross-origin' or proper CORS headers.

gotcha The plugin does not work in production. It is only for Vite's dev server. ↓

fix For production cross-origin isolation, set headers at your reverse proxy or CDN.

Install

npm install vite-plugin-cross-origin-isolation

yarn add vite-plugin-cross-origin-isolation

pnpm add vite-plugin-cross-origin-isolation

Imports

default

wrong

import { crossOriginIsolation } from 'vite-plugin-cross-origin-isolation'

correct

import crossOriginIsolation from 'vite-plugin-cross-origin-isolation'

The plugin exports a default function, not a named export.

crossOriginIsolation
```
const crossOriginIsolation = require('vite-plugin-cross-origin-isolation')
```
For CJS projects, use require; the plugin works with both ESM and CJS.

vite.config.ts usage

wrong

plugins: [crossOriginIsolation]

correct

import crossOriginIsolation from 'vite-plugin-cross-origin-isolation'
export default defineConfig({ plugins: [crossOriginIsolation()] })

The plugin must be invoked as a function (crossOriginIsolation()) when added to the plugins array.

Quickstart

Setup vite-plugin-cross-origin-isolation in Vite config to enable SharedArrayBuffer during development.

// vite.config.ts
import { defineConfig } from 'vite';
import crossOriginIsolation from 'vite-plugin-cross-origin-isolation';

export default defineConfig({
  plugins: [
    crossOriginIsolation()
  ]
});

// In your app (only works in cross-origin isolated context):
if (crossOriginIsolated) {
  const sab = new SharedArrayBuffer(1024);
  console.log('SharedArrayBuffer supported');
} else {
  console.error('Cross-Origin Isolation not active');
}