当前位置： 首页 > news >正文

自己建网站程序,科技布是什么面料,交通银行网站开发,网页加速器免费版文章目录 前言一、配置准备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在此处未定义。(暂时先不用管) 二、使用步骤

4. 如何配置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. 框架集成 一些开发环境需要额外的设置以模拟生产环境。

5. 对于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 }