Qwen3-32B开源模型实战：Clawdbot Web网关配置与跨域/CORS问题解决

优质文章学习记录

— 10 min read

Qwen3-32B开源模型实战：Clawdbot Web网关配置与跨域/CORS问题解决

1. 为什么需要Web网关与跨域处理

你是不是也遇到过这样的情况：本地跑通了Qwen3-32B模型，Ollama服务正常响应，Clawdbot前端页面也能打开，但一点击发送按钮，控制台就报错——CORS policy: No 'Access-Control-Allow-Origin' header is present？
这不是模型没跑起来，也不是代码写错了，而是浏览器在“多管闲事”：它默认禁止网页向不同源（协议、域名、端口任一不同）的后端发起请求。而我们典型的开发结构是——

  • 前端页面运行在 http://localhost:3000（Clawdbot Web界面）
  • Ollama API 默认监听 http://localhost:11434/api/chat
  • 中间又加了一层代理转发到 18789 端口

三者端口全不一致，浏览器直接拦截请求，连请求都发不出去。
所以，网关不是可选项，而是必选项；CORS不是小问题，而是阻断整个交互链路的关键门槛。本文不讲抽象理论，只聚焦一件事：怎么用最轻量、最稳定、最易维护的方式，把Qwen3-32B真正“接进”你的Web聊天界面。

2. 整体架构与角色分工

2.1 各组件职责一目了然

组件运行位置职责默认端口是否暴露给前端
Qwen3-32B 模型本地服务器执行推理，生成文本——（由Ollama托管）❌ 不直连
Ollama 服务localhost提供标准 /api/chat 接口11434❌ 浏览器无法直调
Clawdbot Web 前端浏览器渲染聊天界面，发送请求3000（开发）或 80（生产）用户直接访问
Web 网关代理localhost接收前端请求，转发至Ollama，注入CORS头18789前端唯一通信目标
关键理解：Clawdbot前端只和网关说话，网关再替它去和Ollama“交涉”。网关的核心任务有三个——把 POST /v1/chat/completions 这类前端请求，改写成 Ollama 能认的 /api/chat 格式；在响应里加上 Access-Control-Allow-Origin: * 等必要头，让浏览器放行；处理流式响应（SSE），把Ollama返回的 data: {...} 分块正确透传给前端。

2.2 为什么选 18789 端口？不是随便定的

你可能注意到，文档里反复出现 18789。这不是一个玄学数字，而是经过实测验证的“安全端口”：

  • 它避开了常见服务端口（如 8080 常被其他开发服务占用，3000/5000 是前端默认端口）；
  • 它高于 1024，无需 root 权限即可绑定（Linux/macOS 下普通用户可直接启动）；
  • 它在 10000–20000 区间内，既不冲突又便于记忆（18789 → “要发吧久”，谐音提醒这是“对外发请求”的端口）。
    实际部署时，你完全可以改成 8088 或 9001，只要前后端配置保持一致即可。

3. 三步完成网关配置（无依赖、纯Node.js）

我们不引入Nginx、不装Docker、不配K8s——用一个不到50行的 gateway.js 文件搞定全部逻辑。它轻、快、透明，出问题一眼就能定位。

3.1 创建网关脚本：gateway.js

// gateway.js const http = require('http'); const url = require('url'); const { parse } = require('querystring'); // Ollama服务地址（确保能从本机curl通） const OLLAMA_BASE_URL = 'http://localhost:11434'; const server = http.createServer((req, res) => { const parsedUrl = url.parse(req.url, true); const path = parsedUrl.pathname; // 只处理 /v1/chat/completions 请求（Clawdbot前端默认路径） if (req.method === 'POST' && path === '/v1/chat/completions') { // 设置CORS头（允许任意源，生产环境请替换为具体域名） res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.setHeader('Access-Control-Allow-Credentials', 'true'); // 处理预检请求（OPTIONS） if (req.method === 'OPTIONS') { res.writeHead(200); res.end(); return; } // 构造Ollama请求选项 const options = { method: 'POST', hostname: 'localhost', port: 11434, path: '/api/chat', headers: { 'Content-Type': 'application/json', } }; // 创建Ollama请求 const ollamaReq = http.request(options, (ollamaRes) => { // 将Ollama响应头透传（保留流式特性） res.writeHead(ollamaRes.statusCode, ollamaRes.headers); ollamaRes.pipe(res); }); ollamaReq.on('error', (err) => { console.error('Ollama request failed:', err); res.writeHead(500, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ error: 'Failed to connect to Ollama' })); }); // 将前端请求体原样转发给Ollama let; req.on('data', chunk => body += chunk); req.on('end', () => { try { const frontendData = JSON.parse(body); // 关键转换：将OpenAI格式转为Ollama格式 const ollamaPayload = { model: 'qwen3:32b', // 必须与Ollama中模型名完全一致 messages: frontendData.messages.map(msg => ({ role: msg.role, content: msg.content })), stream: frontendData.stream ?? true, options: { temperature: frontendData.temperature ?? 0.7, num_ctx: 32768 // Qwen3-32B推荐上下文长度 } }; ollamaReq.write(JSON.stringify(ollamaPayload)); ollamaReq.end(); } catch (e) { console.error('Parse error:', e); res.writeHead(400, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ error: 'Invalid JSON in request body' })); } }); } else { // 其他路径返回404 res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('Not Found'); } }); const PORT = 18789; server.listen(PORT, () => { console.log(` Clawdbot Web网关已启动`); console.log(`➡ 前端请请求: http://localhost:${PORT}/v1/chat/completions`); console.log(`⬅ 网关已连接Ollama: http://localhost:11434`); });

3.2 启动网关并验证连通性

打开终端，执行：

node gateway.js

你会看到类似输出：

 Clawdbot Web网关已启动 ➡ 前端请请求: http://localhost:18789/v1/chat/completions ⬅ 网关已连接Ollama: http://localhost:11434

接着，用 curl 模拟一次前端请求，验证网关是否真正打通：

curl -X POST http://localhost:18789/v1/chat/completions \ -H "Content-Type: application/json" \ -d '{ "model": "qwen3:32b", "messages": [{"role": "user", "content": "你好，你是谁？"}], "stream": false }'

如果返回包含 "message": {"role": "assistant", "content": "我是Qwen3..."} 的JSON，说明网关、Ollama、模型三者已全线贯通。

3.3 配置Clawdbot前端指向新网关

打开Clawdbot项目的前端配置文件（通常是 src/config.js 或 .env），修改API基础地址：

# .env VUE_APP_API_BASE_URL=http://localhost:18789 # 或 React 项目中的 config.ts export const API_BASE_URL = 'http://localhost:18789';

然后重启前端服务（npm run dev 或 yarn start）。此时前端所有 /v1/chat/completions 请求，都会先打到 18789 网关，再由网关转发给Ollama——跨域问题彻底消失，流式响应完整保留。

4. 常见CORS问题与精准修复方案

即使按上述步骤操作，仍可能遇到五花八门的CORS报错。以下是真实项目中高频出现的4类问题及对应解法，不绕弯、不猜疑、直接定位根因。

4.1 报错：Response to preflight request doesn't pass access control check

现象：浏览器控制台显示 OPTIONS 请求返回403或500，后续 POST 根本不发出。
原因：网关未正确处理预检请求（OPTIONS），或Ollama服务本身拒绝了OPTIONS方法。
修复：确认 gateway.js 中 if (req.method === 'OPTIONS') 分支存在且执行 res.end()。不要试图让Ollama处理OPTIONS——它不支持，必须由网关拦截并快速响应。

4.2 报错：The value of the 'Access-Control-Allow-Origin' header contains the invalid value '*'

现象：Chrome报错，但Firefox能用；或带上 credentials: true 时失败。
原因：当需要携带Cookie或认证头时，Access-Control-Allow-Origin 不能为 *，必须指定确切域名。
修复：将网关中 res.setHeader('Access-Control-Allow-Origin', '*') 改为：

// 开发环境 res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); // 生产环境（假设部署在 https://chat.yourcompany.com） res.setHeader('Access-Control-Allow-Origin', 'https://chat.yourcompany.com');

同时确保前端请求中 credentials: 'include' 与后端设置严格匹配。

4.3 报错：No 'Access-Control-Allow-Headers' header is present

现象：前端设置了 Authorization: Bearer xxx 或自定义Header，但被拦截。
原因：网关未声明允许该Header。
修复：在网关CORS头中补充：

res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');

4.4 报错：Failed to fetch 但无CORS字样

现象：控制台只显示网络错误，点开Network标签页发现请求状态为 (failed) 或 net::ERR_CONNECTION_REFUSED。
原因：网关根本没运行，或端口被占用，或防火墙拦截。
排查顺序：

  1. lsof -i :18789（macOS/Linux）或 netstat -ano | findstr :18789（Windows）确认端口是否被占用；
  2. curl -v http://localhost:18789/health（若你加了健康检查）或 curl -v http://localhost:18789 看是否返回 Not Found（证明网关在运行）；
  3. 临时关闭防火墙测试。

5. 进阶优化：让网关更健壮、更易维护

基础版网关能跑通，但生产环境还需三点加固。

5.1 添加请求日志与错误追踪

在 gateway.js 的请求处理开头加入：

console.log(`[${new Date().toISOString()}] ${req.method} ${req.url} ← ${req.socket.remoteAddress}`);

在Ollama请求的 on('error') 回调中，不仅打印错误，还记录时间戳和请求体摘要（脱敏后）：

ollamaReq.on('error', (err) => { const logEntry = { timestamp: new Date().toISOString(), error: err.message, remoteAddr: req.socket.remoteAddress, requestBodyPreview: body.substring(0, 100) + '...' }; console.error('GATEWAY_ERROR:', JSON.stringify(logEntry)); // 此处可对接Sentry、写入文件等 });

5.2 支持多模型动态路由

如果你不止部署了 qwen3:32b，还有 qwen2.5:7b 或 phi3:mini，可扩展网关支持模型名透传：

// 从请求路径提取模型名，例如 /v1/chat/completions/qwen3:32b const modelMatch = parsedUrl.pathname.match(/\/v1\/chat\/completions\/(.+)/); const targetModel = modelMatch ? modelMatch[1] : 'qwen3:32b'; // 在ollamaPayload中使用 model: targetModel,

前端请求改为 POST /v1/chat/completions/qwen3:32b 即可切换模型，无需改网关代码。

5.3 集成健康检查端点

添加一个 /health 路径，供前端或运维监控网关存活状态：

if (req.method === 'GET' && path === '/health') { // 尝试快速探测Ollama是否可达 const healthReq = http.request({ hostname: 'localhost', port: 11434, path: '/api/tags', method: 'GET' }, (healthRes) => { res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ status: 'ok', timestamp: new Date().toISOString() })); }); healthReq.on('error', () => { res.writeHead(503, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ status: 'unavailable', reason: 'Ollama unreachable' })); }); healthReq.end(); return; }

6. 总结：一条清晰、可复现、零踩坑的落地路径

回看整个过程，你其实只做了三件确定性极高的事：

  • 明确边界：前端只认网关，网关只认Ollama，各司其职不越界；
  • 最小实现：50行Node.js脚本，无框架、无构建、无依赖，复制即用；
  • 精准归因：CORS不是玄学，是HTTP头的显式声明，是预检请求的正确响应，是流式数据的无损透传。

你不需要成为网络协议专家，也不必深究浏览器同源策略的RFC文档。只要记住这个铁律：前端能访问的地址，必须是网关地址；网关返回的响应，必须带正确的Access-Control头；Ollama的请求体，必须是它能解析的格式。其余，都是细节优化。

现在，打开你的Clawdbot页面，输入第一句话，看着Qwen3-32B以32B参数量带来的扎实回答缓缓浮现——那不是魔法，是你亲手搭起的、稳稳当当的数据桥梁。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 ZEEKLOG星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。

Read more

前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略

前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略

目录 前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略 一、前言 二、如何使用腾讯云免费满血版deepseek 1、腾讯云大模型知识引擎体验中心 2、体验deepseek联网助手 3、人机交互获取AI支持 三、基于DeepSeek实现无限滚动+懒加载+瀑布流模块 1、无限滚动+懒加载+瀑布流模块的底层逻辑 2、人机交互策略与Deepseek的实现过程 ①虚拟列表管理 ②布局容器初始化 ③动态渲染与销毁机制 ④无线滚动实现 ⑤内存优化策略 四、最终代码呈现 1、组件代码 2、组件用法 五、结语         作者：watermelo37         ZEEKLOG万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者，全平台博客昵称watermelo37。         一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、

Clawdbot整合Qwen3-32B保姆级教程：Web网关18789端口调试全记录

Clawdbot整合Qwen3-32B保姆级教程：Web网关18789端口调试全记录 1. 为什么需要这个整合方案 你是不是也遇到过这样的问题：想用本地部署的大模型做聊天机器人，但发现直接调用Ollama的API在Web前端里跨域报错？或者Clawdbot配置完后一直连不上模型，控制台疯狂刷404？又或者好不容易跑起来了，发个消息却卡在“正在思考”半天没反应？ 这正是我们搭建这套环境时踩过的坑。Clawdbot本身不直接对接Ollama，它需要一个中间层来处理协议转换、请求转发和端口映射。而18789这个端口，就是整个链路里最关键的“通关密码”——它不是随便选的，而是Clawdbot默认监听的Web网关入口。 整套方案的核心逻辑其实很朴素： * 你在浏览器里访问 http://localhost:18789，看到的是Clawdbot的聊天界面 * Clawdbot收到你的消息后，不自己去算答案，而是把请求转给内部代理 * 代理再把请求发到 http://localhost:8080（Ollama API地址） * Ollama调用本地的Qwen3-32B模型生成回复
【Flask+VUE】flask+vue开发web网页系统（详细安装使用范例）

【Flask+VUE】flask+vue开发web网页系统（详细安装使用范例）

【Flask_VUE】flask+vue开发web网页系统（详细安装使用范例） * ✅ 一、项目结构规划 * ✅ 二、后端：Flask 搭建 API 服务 * 1. 安装 Flask 并创建后端项目 * 2. 编写 `app.py` * 3. 运行后端服务 * ✅ 三、前端：Vue 搭建用户界面 * 1. 创建 Vue 项目（需要 Node.js 和 npm） * 2. 安装 Axios（用于 HTTP 请求） * 3. 创建 API 服务文件 * 4. 创建用户列表组件（`src/views/

Gemma-3-12B-IT WebUI效果呈现：技术概念阶梯式解释（初学→进阶）

Gemma-3-12B-IT WebUI效果呈现：技术概念阶梯式解释（初学→进阶） 1. 从“聊天机器人”到“智能助手”：初识Gemma-3-12B-IT 你可能用过一些聊天机器人，它们能回答简单问题，但聊到专业话题或者需要写代码时，就常常“掉链子”。今天要聊的Gemma-3-12B-IT，就是来解决这个问题的。 简单来说，你可以把它理解成一个更聪明、更专业的聊天伙伴。它不仅能和你闲聊，还能帮你写代码、解释复杂概念、辅助写作，就像一个随时在线的技术顾问。 这个模型来自Google，是Gemma家族的第三代产品。名字里的“12B”代表它有120亿个参数——你可以把这些参数想象成它大脑里的“知识连接点”，数量越多，通常意味着它能理解和处理更复杂的信息。“IT”是“Instruction Tuned”的缩写，意思是它专门针对人类指令进行了优化训练。这就像一个人不仅知识渊博，还特别擅长理解你的需求并给出精准回答。 2. 为什么是Gemma-3-12B-IT？从“能用”到“好用”的跨越