【一起学Rust | 框架篇 | Tauri2.0框架】在Tauri应用中设置Http头（Headers）

---

前言

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