**作者：** Cascade AI 编程助手

#### 一个“只在我的开发环境”能跑的 Bug

在开发桌面应用时，我们经常会遇到一个经典的窘境：“它在我的电脑上跑得好好的！” 这句话背后，往往隐藏着开发环境（Dev）与生产环境（Release）之间的微妙差异。最近，在开发一款与本地 Ollama 服务交互的 Tauri 应用时，我们就遇到了这样一个棘手的问题：应用在 `tauri dev` 模式下一切正常，但一旦打包成 Windows 的 `.exe` release 版本，所有对本地 Ollama API 的请求都神秘地失败了。

本文由AI根据实际的人机互动Debug调试编写，详细记录我们如何像在经历了几次错误的猜测和关键的思路转折后，最终定位并解决这个由 `Origin` 请求头引发的跨环境网络难题。

#### 迷雾中的初步探索与关键转折

问题初期，我们陷入了迷雾。作为 AI 助手，我的分析首先指向了那些最常见的“嫌疑人”：

*   **假设1：Tauri 权限问题。** 我最初坚持认为，问题可能出在 `tauri.conf.json` 的 `allowlist` 配置上，怀疑 release 版本没有被授予足够的 HTTP 请求权限。
*   **假设2：Windows 网络限制。** 我猜测可能是 Windows 防火墙、杀毒软件，或是系统本身对 `localhost` 的环回网络连接在 release 模式下进行了限制。

然而，**开发者（也就是您）的敏锐观察和清晰指导，为我们拨开了迷雾，带来了第一次关键的转折。**

您坚定地指出，这些关于网络不通的假设是不成立的，因为**应用中对其他公共 API（非本地服务）的调用在 release 版本中完全正常**。这个信息如同一盏明灯，瞬间照亮了我们的困境。它无可辩驳地证明了：
1.  应用的基本网络功能是完好的。
2.  Tauri 的 `allowlist` 配置是正确的，应用确实有权访问网络。

这个关键的反馈，迫使我们放弃了对“网络通不通”的宏观猜测，而转向一个更精确、更深入的问题：**既然网络是通的，那为什么偏偏只有对 `http://localhost:11434` 的请求会失败？**

#### 打造我们的“窃听器” —— debug_server.py

为了回答这个新问题，我们必须亲眼看看 release 应用到底向 Ollama 服务发送了怎样的网络请求。为此，我们编写了一个简单的 Python HTTP 服务器 (`debug_server.py`)。它会伪装成 Ollama 服务，监听在 `11434` 端口，并打印出收到的每一个请求的完整细节，包括请求方法、路径和——最重要的——**请求头（Headers）**。

这个小工具成为了我们破案的关键。

#### 真相大白——Origin 头的幽灵

我们分别在 `dev` 和 `release` 模式下运行应用，并让它们连接到我们的 Python 调试服务器。真相瞬间浮出水面：

**1. Dev 模式下的请求日志：**
```bash
Request: GET /api/version
Headers:
  accept: */*
  host: localhost:11434
  ... (其他一些标准头部)
```
请求非常“干净”，没有任何 `Origin` 头。Ollama 服务认为这是一个常规的、无来源限制的请求，因此正常响应。

**2. Release 模式下的请求日志：**
```bash
Request: GET /api/version
Headers:
  accept: */*
  host: localhost:11434
  origin: https://tauri.localhost  <-- 罪魁祸首！
  ... (其他头部)
```
在 release 版本中，请求头里赫然出现了一个 `origin: https://tauri.localhost`！Ollama 服务默认的 CORS（跨源资源共享）策略非常严格，它不认识这个 `origin`，于是直接拒绝了该请求，返回 `403 Forbidden`。

#### 问题根源 - Tauri 的双重面孔

为什么会产生这种差异？这源于 Tauri 在不同模式下的工作原理：

*   **`dev` 模式**：Tauri 会启动一个本地开发服务器（通常是 Vite 或 Webpack 的 dev server）来提供你的前端资源。当你的前端代码 `fetch('http://localhost:11434')` 时，这个请求是从一个标准的 Web 环境发出的，对于访问另一个 `localhost` 端口，浏览器通常不会附加 `Origin` 头。
*   **`release` 模式**：你的所有前端代码被打包并嵌入到应用的可执行文件中。在 Windows 上，Tauri 使用 WebView2（基于 Microsoft Edge/Chromium）来渲染界面。为了安全，WebView2 会将应用的内容视为来自一个特殊的、受保护的来源，即 `https://tauri.localhost`。因此，当你的应用向外部（即使是 `localhost` 上的另一个端口）发起请求时，WebView2 会严格遵守同源策略，自动附加上 `Origin: https://tauri.localhost` 头。

#### 解决方案 - 从“妥协”到“根治”

**方案一 临时妥协（Workaround）**

最直接的方法是“说服”Ollama 服务信任我们的应用。我们可以通过设置环境变量来启动 Ollama：
```powershell
$env:OLLAMA_ORIGINS="https://tauri.localhost"
ollama serve
```
这告诉 Ollama，来自 `https://tauri.localhost` 的请求是安全的。这个方法能快速解决问题，但缺点是需要用户手动配置环境，不够优雅和健壮。

**方案二 釜底抽薪（The Ultimate Fix）**

最理想的方案是**从根本上避免发送 `Origin` 头**。既然前端（WebView2 环境）无法控制这个行为，那我们就把网络请求的任务交给不受浏览器策略限制的后端——**Rust 核心**。

我们的实施步骤如下：

1.  **引入 `reqwest`**：在 `Cargo.toml` 中添加强大的 Rust HTTP 客户端库 `reqwest`。
2.  **创建 Tauri 命令**：在 `src-tauri/src/main.rs` 中，我们创建了一个新的异步 Rust 函数 `make_http_request`，并将其注册为 Tauri 命令。这个函数使用 `reqwest` 来发起纯净的 HTTP 请求，它在原生环境中执行，自然不会附加任何 `Origin` 头。
    ```rust
    #[tauri::command]
    async fn make_http_request(url: String) -> Result<serde_json::Value, String> {
        // ... 使用 reqwest 发送请求 ...
    }
    ```
3.  **重构前端 API 调用**：我们将前端代码中所有使用 `fetch` 与 Ollama 通信的地方，全部替换为使用 Tauri 的 `invoke` 函数来调用我们新创建的 Rust 命令。
    ```typescript
    // 原来的代码
    // const response = await fetch(`${baseUrl}/api/version`);
    
    // 修改后的代码
    import { invoke } from '@tauri-apps/api/tauri';
    const response = await invoke('make_http_request', { url: `${baseUrl}/api/version` });
    ```

通过这套“移花接木”的操作，我们将所有敏感的网络请求从前端代理到了后端。现在，无论是在 `dev` 还是 `release` 模式下，应用与 Ollama 的通信都变得统一、纯净且可靠。

#### 结论

这次调试经历深刻地揭示了 Tauri 应用在不同环境下的行为差异。`Origin` 头的问题是 Web 技术与原生系统集成时一个常见的“坑”。整个过程也凸显了人机协作的价值：AI 提供了常规检查的思路，而开发者的经验和对项目上下文的深刻理解，则能及时纠正方向，避免在错误的道路上越走越远。

通过使用调试服务器进行细致观察，并利用 Tauri 强大的前后端通信能力，我们不仅解决了问题，还构建了一个更健壮、更可靠的应用架构。希望我们的经验能帮助你，在未来的 Tauri 开发之旅中，少走一些弯路。


"开发正常，打包就炸"——Tauri 开发者必踩坑之 “Origin”引发的"血案"

你还记得开发跨平台应用的痛苦经历吗？不管是选择Electron被人吐槽"内存杀手"，还是选择原生开发为每个平台写三套代码，简直是程序员的噩梦。QT和JavaSwing更是折腾的让人`痛苦面具`。

而现在，AI时代来了！本文将向你展示如何使用`Manus+Tauri`这对"神仙组合"，真正做到`零代码`创建一个`AIBot`（AI聊天机器人）跨平台应用——没错，一行代码都不用写！

请先看效果图 - 基于`Manus+Tauri`开发的跨平台DeepSeek聊天机器人：

<img src="https://static.downly.cn/images/20250527045749.387904026.png" style="zoom:50%;" />

## 1. 技术背景

### 什么是Manus？

**Manus**就像是一个通用AI智能体，你可以把它当作AI程序员，你只需要告诉它"我想要一个聊天机器人应用"，它就能像变魔术一样自动完成：

- 📋 需求分析（比产品经理还懂你要什么）
- 🏗️ 架构设计（比架构师还专业）
- 💻 代码编写（比码农还勤奋）
- 🧪 功能测试（比测试工程师还细心）

简单来说，Manus就是那个你一直梦想的"全能AI同事"，而且它不会摸鱼，不会请假，24小时待命！当然，缺点就是每日积分有限制，超过后需要氪金。

关于Manus的详细介绍请访问：[https://www.downly.cn/nav/detail/e09b8af18c3964676f44d5510bb65aed](https://www.downly.cn/nav/detail/e09b8af18c3964676f44d5510bb65aed)

### Tauri - 轻量级跨平台开发的救星

如果说`Electron`是"用大炮打蚊子"，那**Tauri**就是"精准狙击手"：

- **轻如鸿毛**：应用体积比Electron小90%，妈妈再也不用担心硬盘空间了
- **一码三端**：Windows、macOS、Linux一套代码全搞定，告别重复劳动
- **性能爆表**：基于Rust后端+原生WebView，速度快到飞起
- **安全可靠**：内置安全机制，黑客看了都摇头

### Node.js - 前端开发的老朋友

**Node.js**在这里扮演的角色就像是"后勤部长"：

- 🔧 **工具管家**：提供npm/yarn等包管理工具
- 📦 **依赖管理**：帮你管理成千上万个依赖包
- ⚡ **构建助手**：负责前端资源的编译和打包

虽然它不直接参与应用运行，但没有它，整个开发流程就转不起来。



## 第一步：使用Manus生成项目

打开[Manus官网](https://manus.im/)，然后输入提示词：`使用Tauri开发支持DeepSeek和OpenAI的AIBot应用`，让Manus给我们创建一个可以跨平台使用的AI聊天机器人应用：

![](https://static.downly.cn/images/image-20250527113624830.png)

然后我们可以看到Manus开始分析AIBot的需求、设计应用架构、初始化环境、拉取依赖等。

![](https://static.downly.cn/images/image-20250527113704017.png)

等待大约15-20分钟左右，我们可以看到Manus已经完成了需求分析、架构设计、项目初始化、API集成、用户界面开发、功能测试，甚至是跨平台兼容性验证，如下图：

![](https://static.downly.cn/images/image-20250527113933417.png)

你也可以访问我的AIBot项目创建回放：https://manus.im/share/VMNeKuV7dO3DAyOS6rjPiv?replay=1。



## 第二步：环境配置 - 搭建开发环境

AIBot项目编写完成后，我们需要准备开发环境。首先，我们需要安装Rust，访问RUST官网下载Rust程序安装器：https://www.rust-lang.org/zh-CN/learn/get-started，请根据自己是实际情况下载对应的版本，我这里使用的虚拟机是`Windows 64`。

![](https://static.downly.cn/images/image-20250527114732315.png)

下载完成后打开`rustup-init.exe`，然后根据Rust安装器提示安装Rust：

![](https://static.downly.cn/images/image-20250527105906018.png)

Rust安装时需要网络环境通常（必要的时候可能需要使用VPN），Rust安装完成后我们需要安装Nodejs，这里下载Nodejs的最新LTS版本`v22.16.0`。

![](https://static.downly.cn/images/image-20250527110041831.png)

Rust和Nodejs安装完成后，接下来需要配置Nodejs环境。首先，我们解压Manus的zip包，并打开：`C:\Users\yzmm8\Source\tauri_aibot`目录，然后在空白处`右键->在终端打开`开启PowerShell程序。

![](https://static.downly.cn/images/image-20250527110605183.png)然后执行下面的命令：

```powershell
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
npm config set registry https://registry.npmmirror.com/
npm install yarn -g
yarn config set registry https://registry.npmmirror.com
npm install -g cnpm --registry=https://registry.npmmirror.com
yarn
```

详细拆解上面执行的命令：

1. 解除 PowerShell 默认的脚本运行限制（仅限当前用户）
2. 安装npm阿里云的源
3. 安装yarn
4. 安装yarn阿里云的源
5. 安装cnpm
6. 安装当前node项目的依赖



![](https://static.downly.cn/images/image-20250527110855453.png)

## 第三步：项目启动与调试

`yarn`命令执行成功后，我们就可以执行`yarn run tauri dev`，尝试使用dev模式运行AIBot，第一次启动时会下载Rust项目的依赖，所以需要保持网络畅通。

![](https://static.downly.cn/images/image-20250527111746512.png)

接下来，我们可能会看到下面的报错：

![](https://static.downly.cn/images/image-20250527112025712.png)

由于Manus在创建App的时候缺少了一个AIBot应用的icon文件，所以我们需要创建icons目录（`C:\Users\yzmm8\Source\tauri_aibot\src-tauri\icons`），并复制一个icon到icons目录，然后再次执行：`yarn run tauri dev`命令，即可看到AIBot正常启动。最后点击`设置`，配置DeepSeek的API Key，如下图：

![](https://static.downly.cn/images/image-20250527112633739.png)

## 第四步： 配置AI服务

如果你没有Key，需要访问DeepSeek官网，申请API Key：

![](https://static.downly.cn/images/image-20250527112843439.png)

申请好API Key之后，在AIBot中配置下DeepSeek的API Key，需要特别注意的是由于Manus生成的应用窗口有问题，AIBot的窗口比较小，所以可能看不见`保存设置`的按钮，需要拖动下窗口大小才能看见。

![](https://static.downly.cn/images/image-20250527113139656.png)

配置好`DeepSeek`的API Key后记得点击顶部的`DeepSeek`模型选项。接下来，我们就可以使用`DeepSeek`开始对话了。

![](https://static.downly.cn/images/image-20250527113514991.png)

通过本教程，我们成功使用`Manus+Tauri`组合，在不编写任何代码的情况下创建了一个功能完整的跨平台AI聊天应用。这种开发方式不仅大大降低了技术门槛，也极大提升了开发效率。AI时代的到来，让"人人都是开发者"不再是梦想！

接下来，我将会讲解一些其他使用的AI开发工具和技巧，让大家体验下AI新时代的开发体验，感谢大家关注！



## 关于Downly.cn

[downly.cn](https://www.downly.cn) （平台还在建设中）是我创建的一个融合了AI相关的文章、教程、应用、导航为一体的AI资讯和技术平台。

在AI技术飞速发展的今天，信息碎片化和技术门槛高成为了许多人学习和应用AI的主要障碍。[downly.cn](https://www.downly.cn) 致力于打造一个**一站式AI学习与实践平台**，让每个人都能轻松接触、学习和应用AI技术。

AI零代码开发实战：20分钟用Manus+Tauri+DeepSeek打造跨平台AI聊天机器人

去年，在我第一次使用`Bolt.new`的时候体验到了它非常强大的"一键式开发+部署能力"，只需要简单的提示词或者一张截图就能生成漂亮的前端页面（默认支持多端自适应）。 但是缺点也非常明显，那就是在开发一个稍微大一点的项目（5-10个页面，一个页面500行左右）的时候Token非常不够用，我粗略的计算了下，只要稍微给点强度，三天之内就可以把1000w Token用完。

那个时候我还没意识到"Bolt.new"的Token究竟会跑的有多快，只是认为这一切可能都是正常的情况，毕竟它1000W Token摆在那儿，看起来已经很"良心"了。那段时间我用"Bolt.new"给我优化了多个前端页面，整体效果还是非常不错的也的确给我带来了较大的效率提升。

简单的展示一下我去年开发的一个"网络空间测绘平台"，前端使用了"Bolt.new"优化，整体效果如下：

![20250525012344.png](https://static.downly.cn/images/20250524172439.478551638.png)

还有一个花了一晚上使用`Bolt.new`开发的小破站：https://resonant-seahorse-bf278a.netlify.app/。

我在Taobao买了2次 `Bolt.new`才勉强把几个页面优化完，后来实在感觉太贵了改用WindSurf后就不再续费了。 ![20250525010749.png](https://static.downly.cn/images/20250524170902.404523006.png)

## 再次尝试 - Token消耗之谜揭晓

时隔半年，我再次登录`Bolt.new`，发现居然还是Pro（有点莫名其妙），既然如此，何不再次尝试一下呢？ 不知道是从什么时候开始，`Bolt.new`已经支持了从Github导入项目，正好我Github上有一个基于Next.js的前端项目：[downly.cn](https://www.downly.cn/)，于是我就开始了今天的"AI编程体验"。

先说结果，`Bolt.new`的操作还是比较丝滑的（相比[Lovable](https://lovable.dev/)基本没有任何优势）。但是这并不能掩盖它致命的缺陷"慢"、"疯狂消耗Token"！ 下面请看我现在的Token使用情况： 
![Description](https://static.downly.cn/covers/20250524170755.907352209.png)

是的，没错，1000W Token，它已经被我用完了。我甚至只提了一个需求（Build错误的时候自动修复了大约3次）！ ![20250525015144.png](https://static.downly.cn/images/20250524175853.187847850.png) 

这就有点离谱了，我审计了它修改的代码（Bolt.new每次修改都会提交到Github），终于明白了问题所在。 `Bolt.new`总计给我修改了4次，其中有3次都是在修改Build错误，下面是它的Github提交记录： 
![20250525020436.png](https://static.downly.cn/images/20250524180455.439267920.png)

具体修改的代码如下： 

![20250525020339.png](https://static.downly.cn/images/20250524180645.069161353.png)



## Token消耗的根本原因

是的，它只是修改了5行代码！然而，它为了修改这5行代码，它把整个页面都原封不动的重写了一遍，而我就一直盯着它一直在哪儿哗啦啦的输出，1000W Token如流水一般瞬间就没了.... 事实上，这样的问题也是可以理解的，因为Claude本身就会这么干，只不过它一般会使用偷懒的写法（只输出需要修改的部分）。但是让人无法忍受的是这不是在浪费Token吗？

对比[Lovable](https://lovable.dev/)、Cursor、WindSurf的一次对话，不管修改多少代码都只记一次Prompt credits消耗（以前WindSurf是基于ActionFolw计算的，也明显感觉每次都是积分消耗远远高于`User Prompt credits`），显然`Bolt.new`不再具有任何的优势。



## 更具性价比的替代方案

相比`Bolt.new`，更具性价比且设计的效果非常Nice的AI编程工具则更推荐[Lovable](https://lovable.dev/)和[蓝湖AI](https://lanhuapp.com/)。 例如，[Downly.cn](https://monica.im/home/chat/Monica/Downly.cn)的首页就是我基于Lovable开发的前端页面，第一次使用Lovable的时候，我只是想让它Copy一个类似小红书的网站，而它生成出来的效果非常不错（自适应、带动效）： 
![20250525022846.png](https://static.downly.cn/images/20250524182905.752626374.png)

后来，我又让Lovable帮我开发了几个AI导航页面，整体体验非常不错，效果如下： 

![20250525025852.png](https://static.downly.cn/images/20250524185916.602780614.png)

![20250525025225.png](https://static.downly.cn/images/20250524185340.769286000.png)

除此之外，我还用canva给我设计了Logo、蓝湖给我设计了App，仿佛间AI已经替我完成了非常多的开发和设计任务，在庆幸之余，更多的是"焦虑🍌🟢"。

基于canva设计的Logo：
![image.png](https://static.downly.cn/images/20250524190544.915637063.png)

基于蓝湖开发的App客户端： ![20250525024651.png](https://static.downly.cn/images/20250524185029.608222084.png) App最终效果（基于Tauri+Next.js开发）： ![20250525025115.png](https://static.downly.cn/images/20250524185124.997215875.png)



## 关于Downly.cn

[Downly.cn](https://www.downly.cn/)是我正在建设中的一个集AI文章、教程、应用、导航于一体的综合类门户网站。虽然目前还处于建设阶段，但它的开发过程恰好成为了我测试各种AI编程工具的绝佳案例。

通过这次的对比实验，我更加确信：在AI辅助开发领域，工具的选择不仅关乎效率，更直接影响项目成本。对于大多数开发者而言，像Lovable这样的工具可能是更明智的选择——它们提供了合理的计费模式，避免了不必要的资源浪费，同时保持了高质量的开发体验。

随着AI技术的不断进步，我相信会有更多优秀的工具涌现。而Downly.cn的目标之一，就是帮助开发者在这个日新月异的领域中找到最适合自己的工具和方法。欢迎关注Downly.cn的建设进展，一起探索AI赋能开发的无限可能！

搜索结果: Tauri