Tauri打包应用Fetch请求失效，开发正常打包后按钮无响应求助

问题背景 #

开发模式下Tauri应用完全符合设计预期，但打包为可执行文件后，应用虽能启动但按钮点击无响应。相关代码及配置如下：

HTML按钮代码：

<button type="button" id="Song3@8@4" class="item" title="Song 3">Song 3</button>

JavaScript事件监听代码：

document.getElementById("playback").addEventListener("click", postForm);
async function postForm(event) {
    var clicked = event.target.id.split("@");
    fetch("http://192.168.xxx.xxx:8888/press/bank/"+clicked[1]+"/"+clicked[2], { method : "GET" });
}

taur.conf.json关键配置：allowlist.all:true，shell.all:false（改为true无效），shell.open:true。请求目标为Bitfocus Companion服务器，开发模式无报错，打包后功能失效。

1. 修复事件委托的目标匹配问题 #

你给playback父容器绑定了点击监听，当点击内部按钮时，event.target可能指向按钮的子元素（若按钮包含其他节点），导致无法正确获取按钮ID。可以修改代码确保拿到正确的按钮元素：

document.getElementById("playback").addEventListener("click", postForm);
async function postForm(event) {
  // 向上遍历找到按钮元素
  let target = event.target;
  while (target && target.tagName !== 'BUTTON') {
    target = target.parentElement;
    if (!target) return;
  }
  // 验证ID格式
  if (!target.id.includes('@')) return;
  
  var clicked = target.id.split("@");
  try {
    // 等待请求完成并捕获错误
    await fetch(`http://192.168.xxx.xxx:8888/press/bank/${clicked[1]}/${clicked[2]}`, { method: "GET" });
  } catch (err) {
    console.error('请求失败:', err);
  }
}

2. 配置CSP允许网络请求 #

打包后Tauri的内容安全策略（CSP）可能会阻止外部网络请求，即使allowlist.all:true也需要明确配置允许的请求域名。修改tauri.conf.json的security部分：

"security": {
  "csp": "default-src 'self'; connect-src 'self' http://192.168.xxx.xxx:8888;"
}

3. 调试打包后的应用 #

• 打开打包后的应用，按Ctrl+Shift+I（Windows/Linux）或Cmd+Opt+I（Mac）直接唤起开发者工具，查看控制台的报错信息（比如CSP拦截、请求失败日志）
• 如果无法唤起开发者工具，在tauri.conf.json的bundle节点添加调试配置后重新打包：

"bundle": {
  "active": true,
  "windows": {
    "debug": true
  }
}

4. 处理Fetch请求的错误 #

原代码没有处理Fetch请求的异常（比如网络中断、服务器无响应），打包后即使请求失败也不会有任何提示。添加try/catch和日志可以快速定位问题，如步骤1的代码所示。

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