HTTP 标头

Since 2.1.0

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

标头名称

🌐 Header Names

标头名称仅限于：

🌐 The header names are limited to:

如何配置标头

🌐 How to Configure Headers

使用字符串
使用字符串数组
使用对象/键值对，其中值必须是字符串
使用 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：对于生成的标头值保持不变
array：项目通过 , 连接以生成最终的头部值
key-value：项目由以下组成：键 + 空格 + 值。然后项目通过 ; 连接以生成最终的头部值
null：标题将被忽略

示例

🌐 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",
    }
  }
}

在此示例中，Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 被设置为允许使用 SharedArrayBuffer ↗。Timing-Allow-Origin 允许从列出的网站加载的脚本通过资源时序 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.

为了使这些框架的头文件工作，你可能需要在框架的配置中（用于开发模式）和 Tauri 配置中（用于构建模式）都定义它们。这是因为：

框架在构建时不会包含其配置文件中定义的头文件。
Tauri 不能将头信息注入到框架的开发服务器中——它只能将头信息注入到最终构建输出中。

对于运行构建工具 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'"
      },
    },
})

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'"
            }
          }
        }
      }
    }
  }
}

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 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'"
}