2025-06-18 透過 192.168.0.103:4000/api/chat 向 Mac B 發送請求回覆：⚠️ 錯誤：Failed to fetch

發表於 2025-10-01 分類於 OneDayOneNote 閱讀次數：

很好 👍 這個錯誤 ⚠️ 錯誤：Failed to fetch，代表 Windows 的 Vue 前端沒辦法連到 Mac B 的 MCP Gateway。
我一步步幫你檢查：

✅ Step 1：Mac B 是否真的在跑 MCP Gateway？

在 Mac B 開啟終端機，確認程式有跑：

1	lsof -i :4000

應該要看到類似：

1	node 12345 maggie 12u IPv4 ... TCP *:4000 (LISTEN)

這表示 Mac B 的 4000 port 有開放。

如果沒看到 → 請先啟動：

1	node gateway.mjs

✅ Step 2：確認 Windows 能 ping 到 Mac B

在 Windows 的終端機 (cmd / PowerShell) 輸入：

1	ping 192.168.0.103

應該要看到回覆時間（幾毫秒）。

如果成功 → 網路連得通。
如果失敗 → Windows 和 Mac 不在同一個區網，或 Mac 防火牆擋了。

✅ Step 3：測試 API 是否能打通

在 Windows 上（不是 Vue，先用 curl 測試）：

1	curl http://192.168.0.103:4000/health

應該要得到：

1	{"status":"ok","role":"mcp-gateway"}

如果這一步不通 → 表示問題在 Mac 防火牆 / 網路設置。

✅ Step 4：防火牆設定 (Mac B)

macOS 可能擋住了 node。

到 系統偏好設定 → 安全性與隱私 → 防火牆
點「防火牆選項」
允許 node 接收傳入連線

📌 總結：

如果 Step 2 ping 不通 → 網路問題（Wi-Fi 或區網不同）。
如果 Step 2 通，但 Step 3 curl 不通 → Mac 防火牆問題。
如果 Step 3 curl 通，但 Vue 還是 Failed to fetch → 那可能是 CORS（跨來源請求限制），我可以幫你在 gateway.mjs 加 CORS 支援。

C:\Users\lily_>curl http://192.168.0.103:4000/health
{“status”:”ok”,”role”:”mcp-gateway”}
C:\Users\lily_>

完美 🎉 這表示 Windows 已經能打通 Mac B 的 MCP Gateway，所以不是網路、防火牆的問題。

👉 那剩下的唯一可能是 **CORS (Cross-Origin Resource Sharing, 跨來源資源共享)**。

為什麼會出錯？

你在 Windows 的 Vue 前端 (http://localhost:5173)
去呼叫 Mac B (http://192.168.0.103:4000)
因為「不同來源 (Origin)」 → 瀏覽器安全限制 → Failed to fetch。

✅ 解法：在 `gateway.mjs` 加 CORS 支援

請編輯 **Mac B 的 gateway.mjs**，在 Express 伺服器那段加上 CORS：

import express from "express";
import cors from "cors";

const app = express();
app.use(cors()); // 允許所有來源
app.use(express.json());

// 健康檢查
app.get("/health", (req, res) => {
  res.json({ status: "ok", role: "mcp-gateway" });
});

// Chat API
app.post("/api/chat", async (req, res) => {
  const { provider, messages } = req.body;

  // 模擬回覆
  res.json({
    provider,
    text: `[mock ${provider}] 這是模擬回覆`
  });
});

app.listen(4000, () => {
  console.log("🚀 MCP Gateway running on port 4000");
});

✅ 測試方式

在 Mac B 重新啟動 MCP Gateway：
1
node gateway.mjs
（或 pm2 restart mcp-gateway）
在 Windows 打開你的 Vue 前端 → 輸入訊息 → 點送出

👉 這時候就不會再出現 Failed to fetch，而是能拿到 [mock openai] 這是模擬回覆。

要不要我幫你直接整理一個「加了 CORS 的完整 gateway.mjs 範例檔」給你？