diff --git a/README.md b/README.md index 190da64..e95c7dc 100644 --- a/README.md +++ b/README.md @@ -133,12 +133,18 @@ Cross-Origin-Opener-Policy: same-origin If your development server uses Vite, you can do this by adding the following to your Vite configuration. ```javascript -server: { - headers: { - 'Cross-Origin-Embedder-Policy': 'require-corp', - 'Cross-Origin-Opener-Policy': 'same-origin', +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(); + }); + }, }, -}, +], ``` ### Vite Configuration diff --git a/docs/guide/setup.md b/docs/guide/setup.md index 04aaa8a..f0001b6 100644 --- a/docs/guide/setup.md +++ b/docs/guide/setup.md @@ -68,10 +68,16 @@ optimizeDeps: { To enable cross-origin isolation (required for origin private file system persistence) for the Vite development server, you can add this to your Vite configuration. Just don't forget to also configure your _production_ web server to use the same HTTP headers. ```javascript -server: { - headers: { - 'Cross-Origin-Embedder-Policy': 'require-corp', - 'Cross-Origin-Opener-Policy': 'same-origin', +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(); + }); + }, }, -}, +], ``` diff --git a/vite.config.ts b/vite.config.ts index da96870..a877625 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,13 +9,20 @@ export default defineConfig({ name: 'chrome', }, }, - server: { - headers: { - 'Cross-Origin-Embedder-Policy': 'require-corp', - 'Cross-Origin-Opener-Policy': 'same-origin', - }, - }, optimizeDeps: { exclude: ['@sqlite.org/sqlite-wasm'], }, + plugins: [ + { + enforce: 'pre', + 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(); + }); + }, + }, + ], });