学网络工程师培训学校,网站优化公司价格如何计算,金华建设网,微信小程序开发平台登录文章目录 前言一、配置准备1. 检查版本2. 使用条件3. 支持的请求头#xff08;并不是全部支持#xff09; 二、使用步骤1. 如何配置header2. 框架集成1. 对于Vite系列、Nuxt、Next.js这种前端框架Vite系列框架Angular系列框架Nuxt系列框架Next.js系列框架 2. 对于Yew和Leptos… 文章目录 前言一、配置准备1. 检查版本2. 使用条件3. 支持的请求头并不是全部支持 二、使用步骤1. 如何配置header2. 框架集成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-CredentialsAccess-Control-Allow-HeadersAccess-Control-Allow-MethodsAccess-Control-Expose-HeadersAccess-Control-Max-AgeCross-Origin-Embedder-PolicyCross-Origin-Opener-PolicyCross-Origin-Resource-PolicyPermissions-PolicyTiming-Allow-OriginX-Content-Type-OptionsTauri-Custom-Header 以上请求头的意义均可在MDN找到 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials 以下是官方建议 Tauri-Custom-Header并非用于生产环境。内容安全策略Content-Security-PolicyCSP在此处未定义。(暂时先不用管) 二、使用步骤
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-Wjjrs6qinmnrtOry8x8PPwI77eGpUFR3EEGZktjJNs
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.com2. 框架集成
一些开发环境需要额外的设置以模拟生产环境。
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
}
