Tauri中无法注册自定义URL协议，请求排查问题原因

问题概述 #

在Tauri应用中注册photo自定义URL Scheme后，通过<img src="photo://localhost?id=1" />调用时出现错误：Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME。已完成以下配置但问题仍存在：

• 在main.rs中通过register_uri_scheme_protocol注册photo协议
• tauri.conf.json配置CSP："default-src 'self'; img-src photo://*;"
• Cargo.toml将custom-protocol设为默认特性
• 尝试过cargo tauri dev -f custom-protocol命令

环境信息（cargo tauri info） #

[✔] Environment
    - OS: Windows 10.0.22631 X64
    ✔ WebView2: 120.0.2210.91
    ✔ MSVC: Visual Studio Community 2022
    ✔ rustc: 1.77.0-nightly (e51e98dde 2023-12-31)
    ✔ cargo: 1.77.0-nightly (ac6bbb332 2023-12-26)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: nightly-x86_64-pc-windows-msvc (environment override by RUSTUP_TOOLCHAIN)
    - node: 21.5.0
    - yarn: 3.6.1
    - npm: 10.2.5

[-] Packages
    - tauri [RUST]: 1.5.4
    - tauri-build [RUST]: 1.5.1
    - wry [RUST]: 0.24.7
    - tao [RUST]: 0.16.5
    - tauri-cli [RUST]: 1.5.9
    - @tauri-apps/api [NPM]: 1.5.3
    - @tauri-apps/cli [NPM]: 1.5.9

[-] App
    - build-type: bundle
    - CSP: default-src 'self'; img-src photo://*;
    - distDir: ../dist
    - devPath: http://localhost:3333/
    - framework: React
    - bundler: Vite

排查与解决方案 #

1. 检查协议注册代码的正确性 #

确保register_uri_scheme_protocol的实现符合Tauri 1.x规范，示例代码如下：

use tauri::{App, Manager};

fn main() {
    tauri::Builder::default()
        .register_uri_scheme_protocol("photo", move |_app, request| {
            // 处理请求逻辑，示例：根据id返回图片二进制数据
            let query = request.uri().query().unwrap_or("");
            let img_data = vec![/* 替换为实际图片二进制数据 */];
            
            Ok(tauri::http::ResponseBuilder::new()
                .header("Content-Type", "image/jpeg")
                .body(img_data)
                .unwrap())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

注意：协议名称需完全匹配小写photo，处理函数必须返回合法的HTTP响应。

2. 补全CSP配置 #

WebView2加载自定义协议资源时，除img-src外还需允许connect-src，修改tauri.conf.json的CSP：

"csp": "default-src 'self'; img-src photo://*; connect-src photo://*;"

开发环境下需额外允许本地开发资源，调整为：

"csp": "default-src 'self' http://localhost:3333; img-src 'self' photo://*; connect-src 'self' photo://* http://localhost:3333;"

3. 确认自定义协议特性的启用 #

在Cargo.toml中明确指定custom-protocol特性，避免依赖默认特性遗漏：

[dependencies]
tauri = { version = "1.5.4", features = ["custom-protocol", "default"] }

运行开发命令时明确指定特性：

cargo tauri dev --features custom-protocol

4. 调整URL格式 #

WebView2对自定义协议的域名解析可能存在限制，可简化URL为photo://?id=1，避免localhost带来的解析问题。

5. 验证请求拦截状态 #

在协议处理函数中添加日志，确认请求是否被Tauri接收：

use tauri::{log};

// 在处理函数内添加日志
log::info!("Received photo protocol request: {}", request.uri());

如果无日志输出，说明请求未被Tauri拦截，需检查协议注册逻辑或WebView2的安全限制。

6. 升级Tauri版本 #

当前使用的Tauri版本为1.5.4，可升级至与cli一致的1.5.9版本，修复可能存在的协议注册bug：

[dependencies]
tauri = { version = "1.5.9", features = ["custom-protocol"] }
tauri-build = "1.5.1"

内容的提问来源于stack exchange，提问作者Timsib Adnap