Support Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy on dev server

[chaosprint]

Clear and concise description of the problem

Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers are necessary to support SharedArrayBuffer, as is explained in this article.

But so far, on Vite.js website and docs, there is no description of that, which would be a pain.

Here (https://vitejs.dev/config/#server-https) in docs, no examples are given.

server.https
Type: boolean | https.ServerOptions

Enable TLS + HTTP/2. Note this downgrades to TLS only when the server.proxy option is also used.

The value can also be an options object passed to https.createServer().

Usually in node.js it is set like this:

response.writeHead(200, { "Content-Type": mimeType ,
  "Cross-Origin-Opener-Policy": "same-origin",
  "Cross-Origin-Embedder-Policy": "require-corp" });

But it seems that in vite there is no way to do it?

[chaosprint]

Well, I build this plugin. It works for my purpose but may require further testing.
https://github.com/chaosprint/vite-plugin-cross-origin-isolation

[lynellf]

Well, I build this plugin. It works for my purpose but may require further testing.
https://github.com/chaosprint/vite-plugin-cross-origin-isolation

Worked for me. Awesome lib. Thanks!

[Alexufo]

Any headers should be configured like in serve https://github.com/vercel/serve-handler#headers-array

[chaosprint]

Any headers should be configured like in serve https://github.com/vercel/serve-handler#headers-array

Thanks for the info. I know that Firebase or Netlify all have own ways to set it, but in this issue thread I am referring to the vitejs local dev server. This header settings should become default for testing SAB locally.

[Alexufo]

@chaosprint thank you for reply. I developing frontpage for our wasm lib in vite and it require special headers for it. I I suppose it should be in core for wasm supporting. Wasm become more popular

[ssc-hrep3]

To add custom headers, you can add the following snippet inline to the vite.config.ts file. The code is based on the plugin of @chaosprint. Thank you for that!

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'configure-response-headers',
      configureServer: server => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader('Test-Header', 'A random value');
          next();
        });
      }
    }
  ]
});

[TranquilMarmot]

Going off of what @ssc-hrep3 here's what I have now in my vite.config.ts file!

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    {
      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();
        });
      },
    },
  ],
});

[delebash]

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

[bluwy]

This can now be supported through the server.headers option since #5580