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

OpenClaw中飞书机器人配置指南：如何让群消息免 @ 也能自动回复

用 OpenClaw 做飞书机器人时，默认配置下，群里的消息必须 @ 机器人 才能触发回复。这在很多场景下很不方便——如果希望机器人在群里"隐身"工作，不用 @ 就能自动监听和回复，需要额外配置。 本文记录我解决这个问题的完整过程，供同样踩坑的同学参考。 问题描述 现象： * 飞书群里 @ 机器人 → 正常回复 ✅ * 飞书群里不 @ 机器人 → 没有任何反应 ❌ 环境： * OpenClaw 框架 * 飞书自建应用（机器人） * WebSocket 长连接模式 解决过程 第一步：修改 OpenClaw 配置 在 openclaw.json 中找到飞书渠道配置： "channels":{"feishu":{"requireMention&

【信息科学与工程学】【游戏科学】游戏科学 第一篇 游戏引擎17——虚拟现实与增强现实 第二篇 AR算法 01 阴影算法——软阴影算法

AR软阴影算法详表 (Game-AR1-A2-0001 ~ Game-AR1-A2-0500) 基于阴影映射的软阴影算法 (0001-0100) 编号 算法名称 算法的每一个步骤思考推理的数学方程式 参数/变量/常量情况 应用场景 Game-AR1-A2-0001 百分比渐进滤波软阴影 1. 阴影贴图生成：SM(p)={01 if visibleif occluded 2. 滤波核定义：K(i,j)=N1 ∑k=−rr ∑l=−rr w(k,l) 3. 卷积计算：SPCF (x,y)=∑i=−rr ∑j=−rr SM(x+i,y+j)⋅K(
.NET/JAVA集成GoView低代码可视化大屏完整案例详解【.NET篇】

.NET/JAVA集成GoView低代码可视化大屏完整案例详解【.NET篇】

文章目录 * 一、GoView简介 * 二、.NET集成GoView方案 * 三、集成步骤详解 * 1. 环境准备 * 2. 获取并构建GoView * 3. 创建.NET项目 * 5. 修改.NET路由配置 * 6. 配置API接口 * 7. 修改GoView配置 * 四、进阶集成方案 * 1. 身份验证集成 * 2. 动态主题切换 * 3. 数据缓存优化 * 五、常见问题解决 * 1.跨域问题： * 2. 静态文件404错误： * 3. API请求路径问题： * 4. 性能优化： * 六、总结 一、GoView简介 GoView 是一款基于 Vue3.x 构建的低代码数据可视化开发平台，它允许开发者通过简单的配置快速构建各种数据可视化大屏。 * 官网文档：

VRCT完整使用指南：5分钟掌握VRChat跨语言交流神器

在VRChat的全球化社区中，语言障碍常常成为国际交流的瓶颈。VRCT（VRChat Chatbox Translator & Transcription）作为一款专为VRChat设计的智能辅助工具，通过实时语音转录和多语言翻译功能，让来自世界各地的玩家能够无障碍沟通。这款免费开源工具让语言不再是VR社交的障碍！✨ 【免费下载链接】VRCTVRCT(VRChat Chatbox Translator & Transcription) 项目地址: https://gitcode.com/gh_mirrors/vr/VRCT 核心功能概览 智能语音识别系统 VRCT采用先进的语音识别技术，能够准确捕捉并转换麦克风输入和扬声器输出的音频内容。无论是个人发言还是他人对话，系统都能实时转录为文字，特别适合记录重要对话或回顾交流内容。 主要特性包括： * 实时音频流处理 * 多语言自动检测 * 智能噪音过滤 * 动态阈值调整 多语言实时翻译引擎 支持英语、中文、日语、韩语等多种语言间的即时互译。用户可以根据自己的语言习惯灵活设置源语言和目标语言，系统支持双向转换，确保对话