拓冰建站拓冰建站
首页 / 资讯中心 / 正文

如何把 axios 接入 Tauri 的原生 fetch 以绕过浏览器 CORS 限制

如何把 axios 接入 Tauri 的原生 fetch 以绕过浏览器 CORS 限制【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios在 Tauri 应用里前端代码运行在系统 webview 中跨域请求同样受浏览器 CORS 策略约束。Tauri 的 http-client 插件提供了一个平台fetch函数从原生层发起请求可以绕过这一限制。axios 从v1.12.0起支持通过env配置向fetchadapter 注入自定义fetch函数把这两件事组合起来就能让 axios 实例发出的请求实际走 Tauri 的原生fetch。本文对应的任务就是在 Tauri 应用中完成这个接入使 axios 的跨域请求不再被 webview 的 CORS 策略拦截。前提条件你的 Tauri 应用已经引入并使用tauri-apps/plugin-http包——官方示例代码直接import { fetch } from tauri-apps/plugin-http插件本身的安装与配置不在 axios 文档范围内需要先按 Tauri 侧的 http-client 插件完成配置。已安装的 axios 版本不低于v1.12.0。env注入自定义fetch是 Custom fetch 功能文档标注该功能自v1.12.0起可用fetchadapter 本身则自1.7.0引入。为什么必须显式指定 adapter: fetchaxios 默认按有序优先级[xhr, http, fetch]选择当前环境支持的第一项 adapter。在浏览器环境包括 Tauri 的 webview中这会优先选中xhr你传入的 Tauri 平台fetch根本不会被使用。因此需要在创建实例时显式把adapter设为fetch让请求先落到 fetch adapter再由该 adapter 使用env中提供的自定义fetch。接入步骤fetch-adapter 文档 的 “Using with Tauri” 一节给出了最简设置README 中也有对应示例完整代码如下import { fetch } from tauri-apps/plugin-http; import axios from axios; const instance axios.create({ adapter: fetch, onDownloadProgress(e) { console.log(downloadProgress, e); }, env: { fetch, }, }); const { data } await instance.get(https://google.com);各配置项的作用adapter: fetch强制实例使用 fetch adapter覆盖浏览器环境默认的xhr。env.fetch把 Tauri 的平台fetch传给 fetch adapter替代环境全局fetch。这是绕过 CORS 的关键一步。env.Request/env.Response省略时adapter 会使用全局构造函数。Tauri 示例只传了fetch即保留全局Request/Response。如果你的自定义fetch与全局构造函数不兼容可以显式传null禁用它们。示例中的onDownloadProgress用于演示下载进度捕获。fetch adapter 支持与xhradapter 相同的功能含上传/下载进度捕获进度捕获依赖Request/Response构造函数若按上一条把它们设为null进度捕获将不可用。Tauri 示例保留了全局构造函数所以进度回调仍然生效。验证文档示例以一次真实请求作为用法演示instance.get(https://google.com)后解构出data。这是一段文档示例代码https://google.com可按需替换为你自己的跨域接口但配置部分保持原样。在你的 Tauri 应用中执行该请求响应按预期解析出data即表示这个实例已经按env.fetch指定的路径发请求。接入目标的效果来自 Tauri 侧的说明该平台fetch对从原生层发起的请求绕过浏览器 CORS 限制即此前受 CORS 策略拦截的跨域地址在此路径下可以正常请求。限制与边界env注入自定义fetch仅在 axiosv1.12.0及以上版本可用低版本实例没有env配置路径无法完成此接入。将env.Request与env.Response设为null后fetch adapter 无法捕获上传和下载进度。Tauri 场景下没有说明平台fetch与全局构造函数不兼容示例因此只注入fetch除非你实际遇到不兼容问题不必设置null。fetch adapter 额外支持stream、formdata等响应类型前提是运行环境支持。本文只覆盖 axios 侧的配置tauri-apps/plugin-http在 Tauri 应用中的安装、注册与权限声明属于 Tauri 文档范围axios 仓库内未提供。更多细节可参考仓库内的 fetch adapter 文档、adapters 文档 以及 README 中的 Fetch adapter 章节。【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
分享:

看完干货,该让你的企业上线了

免费需求沟通 · 48 小时内出具建站方案 · 河南本地可上门