Likanug // lab
返回文章列表

文章

技术分享

关于tauri中前端代码引用图片跨域请求限制的问题

#tauri#Rust#React#前端
目录
  1. 为什么会出现跨域请求限制？
  2. 🧠 浏览器的跨域限制只作用于前端代码发起的请求
  3. 我们是怎么解决的这个问题的？
  4. ✅ 我们并没有直接从前端访问图片：
  5. 🧠 base64 data URL 不再需要额外请求
  6. ✅ 总结：
  7. 🛡️ 延伸建议
  8. 📎 参考文章

为什么会出现跨域请求限制？#

🧠 浏览器的跨域限制只作用于前端代码发起的请求#

浏览器的 同源策略 (Same-Origin Policy) 是为了安全，阻止前端 JS 直接访问不同源的资源（除非服务端支持 CORS）。此处以图片为例，通常我们在前端中是这样引入图片的：
<img src={src} alt={alt} className={className} />，这里我想引用哔哩哔哩的视频封面图片 由于哔哩哔哩的“strict-origin-when-cross-origin”我们是获取不到这个图片的。

我们是怎么解决的这个问题的？#

✅ 我们并没有直接从前端访问图片：#

而是这样做的：

前端 React ⟶ 调用 Tauri 命令（Rust 代码）⟶ Rust 用 reqwest 请求 bilibili 图片 ⟶ 返回 base64 编码给前端

这个过程中：

  • 是 Rust 后端（Tauri 中的命令）通过 reqwest 发起的 HTTP 请求，不受浏览器跨域策略限制。
  • 最终给前端的是一个 base64 编码后的字符串，它已经不是跨域资源，而是纯文本数据，前端 img.src = "data:image/jpeg;base64,... 是合法的。

🧠 base64 data URL 不再需要额外请求#

  • <img src="data:image/png;base64,..."> 是浏览器标准支持的语法。
  • 它是嵌入式图片数据，浏览器渲染时不会再发起 HTTP 请求。
  • 这意味着：不会触发任何 CORS 校验或 OPTIONS 预检请求，更无跨域问题。

✅ 总结：#

方式是否跨域受限是否可访问原因
React 前端直接访问 bilibili 图片✅ 是❌ 受限于 CORS 同源策略没有 CORS 头时会被浏览器阻止
Tauri 后端使用 reqwest 拉取图片❌ 否✅ 可以自由访问任意网络资源后端程序不受 CORS 限制
转为 base64 后传给前端❌ 否✅ 前端直接渲染base64 是纯数据，非跨域资源

🛡️ 延伸建议#

如果你未来要加载大量图片，base64 虽然规避了跨域，但会：

  • 增加内存占用
  • 加大传输数据量（base64 通常比原图大 33%）
  • 不适合缓存（每次都要传完整） 因此，如果你有大量或高清图建议：
  • 本地缓存或下载图片资源
  • 或在 Rust 中转为临时文件，再通过 asset: 伺服给前端

📎 参考文章#