2025-06-06 錯誤：Failed to fetch，代表 Windows 的 Vue 前端沒辦法連到 Mac B 的 MCP Gateway

發表於 更新於 分類於 閱讀次數：
2025-06-05 Step 2：Windows 前端 Vue 最小 Ask.vue + App.vue

2025-06-05 Step 2：Windows 前端 Vue 最小 Ask.vue + App.

很好 👍 這個錯誤 ⚠️ 錯誤：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。

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

📌 總結：

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

要不要你先幫我跑 **Step 3：在 Windows 用 curl 測試 http://192.168.0.103:4000/health**，看能不能通？

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