chaosprint/vite-plugin-cross-origin-isolation

A vite plugin for enabling cross-origin-isolation for dev server.

vite-plugin-cross-origin-isolation

A vite plugin for enabling cross-origin-isolation for dev server.

Why

Cross origin isolation is required for SharedArrayBuffer.

Using this plugin, in local dev server, functions that rely on SAB can be enabled and tested.

Edit 2023:

The motivation of this plugin was mainly for my project Glicol: a collaborative music programming language

But now there are some "official" ways to do it, see here.

Usage

First install it in your vite project:

npm i -D vite-plugin-cross-origin-isolation

Then, in vite.config.js:

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

export default {
    plugins: [
      // other plugins...
      crossOriginIsolation()
    ]
}

If this doesn't work, try this instead:

import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    {
      name: "configure-response-headers",
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          next();
        });
      },
    },
  ],
});

Copy from: vitejs/vite#3909 (comment)

License

The MIT License (MIT)

Copyright (c) 2021 - present Qichao Lan (chaosprint)

vite-plugin-cross-origin-isolation's Issues

This works for the vite dev server but how to you enable this for `vite preview`?

This works for the vite dev server but how to you enable this for vite preview?

Originally posted by @delebash in vitejs/vite#3909 (comment)

can not run project after add this plugin

This can now be supported through the `server.headers` option

Unfortunately, there is zero doc about server.headers on the official website. Interesting.
The issue is closed, but you can still find some useful info there:
vitejs/vite#3909

For older vite, you can try to copy paste this rather than install this plugin.

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'configure-server',
      configureServer(server) {
        server.middlewares.use((_req, res, next) => {
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          next();
        });
      }
    },
    // you other plugins
  ]
});