Encabezados para usar OPFS en JavaScript (CORS 2)

El Origin Private File System (también llamado OPFS) permite tener un sistema de archivos completo directamente en el navegador web con el que podemos interactuar a través de JavaScript.

Para que OPFS esté disponible necesitamos servir el contenido con 2 encabezados importantes:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

No importa el lenguaje de programación ni el servidor usado para servir los archivos; el código JavaScript debe ser servido con un servidor que envíe esos headers. Si no lo hacemos de esa manera no vamos a poder acceder al OPFS.

Enviando encabezados

Esto va a depender de las tecnologías y servidor web que utilices. Por ejemplo, si usas PHP con Apache puedes lograr esto con un .htaccess así:

Header always set Cross-Origin-Opener-Policy "same-origin"
Header always set Cross-Origin-Embedder-Policy "require-corp"

Si usas Vite:

import { defineConfig } from 'vite';

export default defineConfig({
	base: "./",
	server: {
		headers: {
			'Cross-Origin-Opener-Policy': 'same-origin',
			'Cross-Origin-Embedder-Policy': 'require-corp',
		},
	},
});

Esos son algunos ejemplos, pero simplemente debes enviar esos encabezados desde cualquier servidor que estés usando. De esta manera podrás usar OPFS con JavaScript.

Con Nginx

Puedes hacerlo poniendo lo siguiente, en mi caso no quiero modificar la raíz así que solo lo coloco en mi carpeta de apps:

location /apps/{
    add_header Cross-Origin-Opener-Policy "same-origin" always;
    add_header Cross-Origin-Embedder-Policy "require-corp" always;
}

Con eso todos los descendientes de la carpeta lo tendrán