Qwen3-32B 集成实战：Clawdbot Web 网关配置与 CORS 问题解决

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

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

3.1 创建网关脚本：gateway.js

// gateway.js
const http = require('http');
const url = require('url');

// 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 body = '';
    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 参数量带来的扎实回答缓缓浮现——那不是魔法，是你亲手搭起的、稳稳当当的数据桥梁。