Encabezados HTTP

Desde 2.1.0

Un encabezado definido en la configuración se envía junto con las respuestas a la webview. Esto no incluye mensajes de IPC ni respuestas de error. Para ser más específicos, cada respuesta enviada a través de la función get_response en crates/tauri/src/protocol/tauri.rs ↗ incluirá esos encabezados.

Nombres de encabezados

Los nombres de los encabezados están limitados a:

Cómo configurar encabezados

con un string
con un array de strings
con un objeto/clave-valor, donde los valores deben ser strings
con null

Los valores de los encabezados siempre se convierten a strings para la respuesta real. Dependiendo de cómo se vea el archivo de configuración, es posible que sea necesario componer algunos valores de encabezado. Estas son las reglas sobre cómo se crea una composición:

string: se mantiene igual para el valor de encabezado resultante
array: los elementos se unen mediante , para el valor de encabezado resultante
clave-valor: los elementos se componen a partir de: clave + espacio + valor. Luego, los elementos se unen mediante ; para el valor de encabezado resultante
null: el encabezado se ignorará

Ejemplo

{
 //...
  "app":{
    //...
    "security": {
      //...
      "headers": {
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp",
        "Timing-Allow-Origin": [
          "https://developer.mozilla.org",
          "https://example.com",
        ],
        "X-Content-Type-Options": null, // gets ignored
        "Access-Control-Expose-Headers": "Tauri-Custom-Header",
        "Tauri-Custom-Header": {
          "key1": "'value1' 'value2'",
          "key2": "'value3'"
        }
      },
      // notice how the CSP is not defined under headers
      "csp": "default-src 'self'; connect-src ipc: http://ipc.localhost",
    }
  }
}

En este ejemplo, Cross-Origin-Opener-Policy y Cross-Origin-Embedder-Policy están configurados para permitir el uso de SharedArrayBuffer ↗. Timing-Allow-Origin otorga a los scripts cargados desde los sitios web enumerados acceso a datos detallados de tiempos de red a través de la Resource Timing API ↗.

Para el ejemplo helloworld, esta configuración da como resultado:

access-control-allow-origin:  http://tauri.localhost
access-control-expose-headers: Tauri-Custom-Header
content-security-policy: default-src 'self'; connect-src ipc: http://ipc.localhost; script-src 'self' 'sha256-Wjjrs6qinmnr+tOry8x8PPwI77eGpUFR3EEGZktjJNs='
content-type: text/html
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
tauri-custom-header: key1 'value1' 'value2'; key2 'value3'
timing-allow-origin: https://developer.mozilla.org, https://example.com

Frameworks

Algunos entornos de desarrollo requieren configuraciones adicionales para emular el entorno de producción.

JavaScript/TypeScript

Para configuraciones que ejecutan la herramienta de compilación Vite (incluyendo Qwik, React, Solid, Svelte y Vue), agrega los encabezados deseados a vite.config.ts.

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  server: {
      // ...
      headers: {
        'Cross-Origin-Opener-Policy': 'same-origin',
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Timing-Allow-Origin': 'https://developer.mozilla.org, https://example.com',
        'Access-Control-Expose-Headers': 'Tauri-Custom-Header',
        'Tauri-Custom-Header': "key1 'value1' 'value2'; key2 'value3'"
      },
    },
})

A veces, vite.config.ts se integra en el archivo de configuración del framework, pero la configuración sigue siendo la misma. En el caso de Angular, agrégalos a angular.json.

{
  //...
  "projects":{
    //...
    "insert-project-name":{
      //...
      "architect":{
        //...
        "serve":{
          //...
          "options":{
            //...
            "headers":{
              "Cross-Origin-Opener-Policy": "same-origin",
              "Cross-Origin-Embedder-Policy": "require-corp",
              "Timing-Allow-Origin": "https://developer.mozilla.org, https://example.com",
              "Access-Control-Expose-Headers": "Tauri-Custom-Header",
              "Tauri-Custom-Header": "key1 'value1' 'value2'; key2 'value3'"
            }
          }
        }
      }
    }
  }
}

Y en el caso de Nuxt, a nuxt.config.ts.

export default defineNuxtConfig({
  //...
  vite: {
    //...
    server: {
      //...
      headers:{
        'Cross-Origin-Opener-Policy': 'same-origin',
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Timing-Allow-Origin': 'https://developer.mozilla.org, https://example.com',
        'Access-Control-Expose-Headers': 'Tauri-Custom-Header',
        'Tauri-Custom-Header': "key1 'value1' 'value2'; key2 'value3'"
      }
    },
  },
});

Next.js no depende de Vite, por lo que el enfoque es diferente. Lee más al respecto aquí ↗. Los encabezados se definen en next.config.js.

module.exports = {
  //...
  async headers() {
    return [
      {
        source: '/*',
        headers: [
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Timing-Allow-Origin',
            value: 'https://developer.mozilla.org, https://example.com',
          },
          {
            key: 'Access-Control-Expose-Headers',
            value: 'Tauri-Custom-Header',
          },
          {
            key: 'Tauri-Custom-Header',
            value: "key1 'value1' 'value2'; key2 'value3'",
          },
        ],
      },
    ]
  },
}

Rust

Para Yew y Leptos, agrega los encabezados a Trunk.toml.

#...
[serve]
#...
headers = {
  "Cross-Origin-Opener-Policy" = "same-origin",
  "Cross-Origin-Embedder-Policy" = "require-corp",
  "Timing-Allow-Origin" = "https://developer.mozilla.org, https://example.com",
  "Access-Control-Expose-Headers" = "Tauri-Custom-Header",
  "Tauri-Custom-Header" = "key1 'value1' 'value2'; key2 'value3'"
}

Apoya en Open Collective Patrocina en GitHub