Revert Vite config recommendation change (doesn't work in test app)

DallasHoff · Jan 20, 2024 · cb70d26 · cb70d26
1 parent 40de155
commit cb70d26
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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();
+				});
+			},
+		},
+	],
 });