---

前言

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