HTTP 標頭

自 2.1.0 起

在配置中定義的標頭會隨著對 webview 的回應一起發送。這不包括 IPC 訊息和錯誤回應。更具體地說，每個通過 get_response 函數在 crates/tauri/src/protocol/tauri.rs ↗ 中發送的回應都將包含這些標頭。

標頭名稱

標頭名稱僅限於

如何配置標頭

使用字串
使用字串陣列
使用物件/鍵值對，其中值必須為字串
使用 null

標頭值始終轉換為字串以用於實際響應。根據配置文件的外觀，某些標頭值需要組合。以下是關於如何創建組合值的規則

string：對於結果標頭值保持不變
Array：項目通過 , 連接以形成結果標頭值
key-value：項目由：鍵 + 空格 + 值組成。項目然後通過 ; 連接以形成結果標頭值
null：標頭將被忽略

範例

{
 //...
  "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",
    }
  }
}

在此範例中，Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 設定為允許使用 SharedArrayBuffer ↗。Timing-Allow-Origin 授權從列出的網站載入的腳本通過 Resource Timing API ↗ 存取詳細的網路計時資料。

對於 helloworld 範例，此配置會產生

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

框架

某些開發環境需要額外的設定，以模擬生產環境。

JavaScript/TypeScript

對於運行建構工具 Vite 的設定（包括 Qwik、React、Solid、Svelte 和 Vue），請將所需的標頭添加到 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'"
      },
    },
})

有時 vite.config.ts 會整合到框架的組態檔中，但設定保持不變。如果是 Angular，請將它們添加到 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'"
            }
          }
        }
      }
    }
  }
}

如果是 Nuxt，則添加到 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 不依賴 Vite，因此方法有所不同。請在此處閱讀更多相關資訊 here ↗。標頭在 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

對於 Yew 和 Leptos，請將標頭添加到 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'"
}