当前位置: 首页> 文旅> 旅游 > 正能量网站下载_专业郑州做网站_百度安装下载_有没有免费推广平台

正能量网站下载_专业郑州做网站_百度安装下载_有没有免费推广平台

时间:2025/7/11 14:42:06来源:https://blog.csdn.net/weixin_47754149/article/details/145698963 浏览次数:0次
正能量网站下载_专业郑州做网站_百度安装下载_有没有免费推广平台

文章目录

  • 前言
  • 一、配置准备
    • 1. 检查版本
    • 2. 使用条件
    • 3. 支持的请求头(并不是全部支持)
  • 二、使用步骤
    • 1. 如何配置header
    • 2. 框架集成
      • 1. 对于`Vite`系列、`Nuxt`、`Next.js`这种前端框架
        • `Vite`系列框架
        • `Angular`系列框架
        • `Nuxt`系列框架
        • `Next.js`系列框架
      • 2. 对于`Yew`和`Leptos`这种全栈框架


前言

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-PolicyCross-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系列、NuxtNext.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. 对于YewLeptos这种全栈框架

这种全栈框架只需要新建个文件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'"
}
关键字:正能量网站下载_专业郑州做网站_百度安装下载_有没有免费推广平台

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: