HTTP 标头

Since 2.1.0

配置中定义的标头将与响应一起发送到 webview。这不包括 IPC 消息和错误响应。更具体地说，通过 crates/tauri/src/protocol/tauri.rs ↗ 中的 get_response 函数发送的每个响应都将包含这些标头。

¥A header defined in the configuration gets sent along the responses to the webview. This doesn’t include IPC messages and error responses. To be more specific, every response sent via the get_response function in crates/tauri/src/protocol/tauri.rs ↗ will include those headers.

标头名称

¥Header Names

标头名称仅限于：

¥The header names are limited to:

:::note 注意

Tauri-Custom-Header 不适用于生产用途。

¥Tauri-Custom-Header is not intended for production use.

:::

:::note 注意

The Content-Security-Policy (CSP) 未在此处定义。

¥The Content-Security-Policy (CSP) is not defined here.

:::

如何配置标头

¥How to Configure Headers

使用字符串

¥with a string
使用字符串数组

¥with an Array of strings
使用对象/键值，其中值必须是字符串

¥with an Object/Key-Value, where the values must be strings
使用 null

¥with null

标头值始终转换为字符串以进行实际响应。根据配置文件的外观，需要组成一些标头值。这些是关于如何创建复合体的规则：

¥The header values are always converted to strings for the actual response. Depending, on how the configuration file looks, some header values need to be composed. Those are the rules on how a composite gets created:

string：对于生成的标头值保持不变

¥string: stays the same for the resulting header value
Array：项目由 , 连接以获得生成的标题值

¥Array: items are joined by , for the resulting header value
key-value：项目由以下部分组成：键 + 空格 + 值。然后，项目通过 ; 连接起来，以获得最终的标头值

¥key-value: items are composed from: key + space + value. Items are then joined by ; for the resulting header value
null：标题将被忽略

¥null: header will be ignored

示例

¥Example

{
 //...
  "app":{
    //...
    "security": {
      //...
      "headers": {
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp",
        "Timing-Allow-Origin": [
          "https://web.nodejs.cn",
          "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",
    }
  }
}

:::note 注意

Tauri-Custom-Header 不适用于生产用途。用于测试：请记住相应地设置 Access-Control-Expose-Headers。

¥Tauri-Custom-Header is not intended for production use. For Tests: Remember to set Access-Control-Expose-Headers accordingly.

:::

在此示例中，Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 设置为允许使用 SharedArrayBuffer ↗。Timing-Allow-Origin 允许从列出的网站加载的脚本通过 Resource Timing API ↗ 访问详细的网络计时数据。

¥In this example Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy are set to allow for the use of SharedArrayBuffer ↗. Timing-Allow-Origin grants scripts loaded from the listed websites to access detailed network timing data via the Resource Timing API ↗.

对于 helloworld 示例，此配置导致：

¥For the helloworld example, this config results in:

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://web.nodejs.cn, https://example.com

框架

¥Frameworks

某些开发环境需要额外的设置来模拟生产环境。

¥Some development environments require extra settings, to emulate the production environment.

JavaScript/TypeScript

对于运行构建工具 Vite 的设置（包括 Qwik、React、Solid、Svelte 和 Vue），请将所需的标头添加到 vite.config.ts。

¥For setups running the build tool Vite (those include Qwik, React, Solid, Svelte, and Vue) add the wanted headers to 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://web.nodejs.cn, https://example.com',
        'Access-Control-Expose-Headers': 'Tauri-Custom-Header',
        'Tauri-Custom-Header': "key1 'value1' 'value2'; key2 'value3'"
      },
    },
})

有时 vite.config.ts 集成到框架配置文件中，但设置保持不变。如果是 Angular，请将它们添加到 angular.json。

¥Sometimes the vite.config.ts is integrated into the frameworks configuration file, but the setup stays the same. In case of Angular add them to 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://web.nodejs.cn, https://example.com",
              "Access-Control-Expose-Headers": "Tauri-Custom-Header",
              "Tauri-Custom-Header": "key1 'value1' 'value2'; key2 'value3'"
            }
          }
        }
      }
    }
  }
}

如果是 Nuxt 到 nuxt.config.ts。

¥And in case of Nuxt to 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://web.nodejs.cn, https://example.com',
        'Access-Control-Expose-Headers': 'Tauri-Custom-Header',
        'Tauri-Custom-Header': "key1 'value1' 'value2'; key2 'value3'"
      }
    },
  },
});

Next.js 不依赖 Vite，因此方法不同。阅读有关 here ↗ 的更多信息。标头在 next.config.js 中定义。

¥Next.js doesn’t rely on Vite, so the approach is different. Read more about it here ↗. The headers are defined in 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://web.nodejs.cn, https://example.com',
          },
          {
            key: 'Access-Control-Expose-Headers',
            value: 'Tauri-Custom-Header',
          },
          {
            key: 'Tauri-Custom-Header',
            value: "key1 'value1' 'value2'; key2 'value3'",
          },
        ],
      },
    ]
  },
}

Rust

对于 Yew 和 Leptos，将标题添加到 Trunk.toml

¥For Yew and Leptos add the headers to Trunk.toml

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