---

前言

Tauri是一個基于Rust的跨平臺桌面應用框架，允許開發者使用Web技術（如HTML、CSS和JavaScript）創建桌面應用。Tauri2.0是該框架的最新版本，提供了許多新功能和改進。其中一個重要的功能是對Http頭（Headers）的支持。在本文中，我們將探討如何在Tauri應用中設置Http頭，包括為什么設置Http頭是必要的、如何設置Http頭，以及一些常見的Http頭設置場景。

在Web開發中，Http頭（Headers）是Http請求和響應的一部分，用于傳遞額外的信息。Http頭可以用來指定請求的方法、請求體的格式、認證信息等。設置Http頭是必要的，因為它可以幫助開發者控制Http請求的行為，例如指定請求的緩存策略、設置跨域資源共享（CORS）頭等。特別是在Tauri應用中，設置Http頭可以幫助開發者與后端服務器進行更好的交互。

在應用開發過程中，對于http的headers控制是一個通常的需求，在過去的tauri版本中，如果你想要設置http請求頭，就需要ipc調用rust層的方法，然后再設置請求頭，就比較麻煩，或者你可以試試用Fetch看看能否得到你想要的效果。但是現在，最近Tauri官方就給出了配置http請求頭的方法，盡管并不能盡善盡美，但也足夠開發使用了。

---

一、配置準備

1. 檢查版本

首先確認你的tauri版本要大于2.1.0，因為這是后面新增的特性，如果你是剛剛從頭創建的Tauri項目，那么可以跳過這步。

2. 使用條件

然后就是要明確知道什么時候會用上這個配置。

配置中定義的標頭會隨對網頁視圖的響應一起發送。這并不包括進程間通信（IPC）消息和錯誤響應。更具體地說，通過crates/tauri/src/protocol/tauri.rs中的get_response函數發送的每個響應都將包含這些標頭。

3. 支持的請求頭（并不是全部支持）

• Access-Control-Allow-Credentials
• Access-Control-Allow-Headers
• Access-Control-Allow-Methods
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Cross-Origin-Embedder-Policy
• Cross-Origin-Opener-Policy
• Cross-Origin-Resource-Policy
• Permissions-Policy
• Timing-Allow-Origin
• X-Content-Type-Options
• Tauri-Custom-Header

以上請求頭的意義均可在MDN找到
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

以下是官方建議

1. Tauri-Custom-Header并非用于生產環境。
2. 內容安全策略（Content-Security-Policy，CSP）在此處未定義。(暫時先不用管)

二、使用步驟

1. 如何配置header

官方文檔寫的，tauri的header支持以下值

• 字符串
• 字符串數組
• key-value對象，但是value必須是字符串
• null

標頭值始終會針對實際響應轉換為字符串。根據配置文件的外觀，某些標頭值需要進行組合。以下是創建復合標頭的規則：

• string - 與最終轉化的結果保持一致
• Array - 結果是用, 連接起來
• key-value - 最終打包的格式是key + 空格 + value，然后結尾用;分割
• null - 最終會被忽略

例如

// src-tauri/tauri.conf.json
{//..."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, // 忽略"Access-Control-Expose-Headers": "Tauri-Custom-Header","Tauri-Custom-Header": {"key1": "'value1' 'value2'","key2": "'value3'"}},// 告訴內容安全策略（CSP）手動制定請求頭。"csp": "default-src 'self'; connect-src ipc: http://ipc.localhost",}}
}

Tauri-Custom-Header并非用于生產環境。對于測試：請記得相應地設置Access-Control-Expose-Headers。

在這個示例中，Cross-Origin-Opener-Policy和Cross-Origin-Embedder-Policy被設置為允許使用SharedArrayBuffer (文檔在MDN)。Timing-Allow-Origin允許從列出的網站加載的腳本通過資源定時 API 訪問詳細的網絡定時數據。

最終的請求頭結果會轉化為

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

2. 框架集成

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

1. 對于Vite系列、Nuxt、Next.js這種前端框架

Vite系列框架

對于使用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'"},},
})

Angular系列框架

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系列框架需要寫入的文件是nuxt.config.ts

// 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系列框架

Next.js并不依賴于Vite，但是異曲同工，寫入的文件是next.config.js

// 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'",},],},]},
}

2. 對于Yew和Leptos這種全棧框架

這種全棧框架只需要新建個文件Trunk.toml，然后按照以下內容寫入即可

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