Day 11：n8n 初體驗：建立第一支 Webhook，打通前後端任督二脈

18th鐵人賽

X_Xuan

團隊nutc imac

2026-09-25 00:04:20

39 瀏覽

分享至

Day 11：n8n 初體驗：建立第一支 Webhook，打通前後端任督二脈

嗨，大家今天過得好嗎？歡迎來到鐵人賽 Day 11。

過去 10 天，我們在前端 SwiftUI 的泥淖裡打滾，成功把殼跟架構都捏出來了。現在前端已經準備好一份精美的「預算與需求」資料，正等著發送出去。

今天，我們要正式喚醒在 Day 3 用 Docker 架設好的 n8n 引擎。我們要在 n8n 裡建立一個「接收端」，也就是所謂的 Webhook，並把 iOS App 裡的假資料 (Mock Data) 替換成真正的網路請求，徹底打通前後端的任督二脈！

第一步：在 n8n 建立 Webhook 節點

請打開瀏覽器，進入你的 n8n 本地端後台（預設是 http://localhost:5678）。

在空白的畫布 (Canvas) 上，點擊畫面中間或右上角的 「+ Add a node」。
在搜尋框輸入 Webhook 並點擊新增。
點開 Webhook 節點設定，我們要做幾個關鍵調整：
- HTTP Method: 改為 POST（因為前端要傳遞 JSON 資料過來）。
- Path: 輸入 recommend（這是我們自訂的 API 路由，網址最後會長得像 /webhook-test/recommend）。
- Respond: 選擇 When Last Node Finishes（這非常重要！這代表 n8n 會等後續所有邏輯、包含 AI 產出結果後，才把資料回傳給前端，否則它會立刻回傳一個空白的 OK）。

設定好之後，把節點視窗關起來。你會看到畫布上的 Webhook 節點上方有一個 「Test URL」。點擊它並複製這個網址（應該會是 http://localhost:5678/webhook-test/recommend）。

小知識：Test URL vs Production URL
n8n 的 Webhook 有分兩種。開發階段我們都用 Test URL，要點擊畫面下方的「Execute Workflow」它才會開始監聽；等專案正式上線、啟用 (Active) 後，才會換成常駐監聽的 Production URL。

第二步：請 AI 幫我們重寫 APIService

後端入口準備好了，現在我們要把目光切回 Xcode。
還記得我們在 Day 8 寫的那個用 Task.sleep 假裝讀取的 APIService.swift 嗎？現在我們要用 Vibe Coding 把它換成真正的 URLSession 網路請求。

打開 Prompt 視窗，下這段指令：

請幫我修改 SwiftUI 專案中的 `APIService.swift`。
1. 將原本的 Mock Data 邏輯移除。
2. 改用 `URLSession` 發送真實的 POST 請求。
3. 目標 URL 為：`http://localhost:5678/webhook-test/recommend`
4. 請將 `budget` (Int) 與 `purpose` (String) 打包成 JSON 作為 HTTP Body 發送。
5. 預期回傳的資料依然可以解析為原本的 `HardwareMenu` Model。
請給我完整修改後的 APIService.swift 程式碼，並處理好 Error Handling。

AI 應該會吐給你一段非常標準的 Swift 網路請求程式碼，大概長這樣：

import Foundation

class APIService {
    static let shared = APIService()
    private init() {}
    
    func fetchRecommendation(budget: Int, purpose: String) async throws -> HardwareMenu {
        guard let url = URL(string: "http://localhost:5678/webhook-test/recommend") else {
            throw URLError(.badURL)
        }
        
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.setValue("application/json", forHTTPHeaderField: "Content-Type")
        
        let payload: [String: Any] = ["budget": budget, "purpose": purpose]
        request.httpBody = try JSONSerialization.data(withJSONObject: payload)
        
        let (data, response) = try await URLSession.shared.data(for: request)
        
        guard let httpResponse = response as? HTTPURLResponse, httpResponse.statusCode == 200 else {
            throw URLError(.badServerResponse)
        }
        
        return try JSONDecoder().decode(HardwareMenu.self, from: data)
    }
}

經典踩坑警告：HTTP 網路阻擋 (ATS)

這時候如果你滿心歡喜地按下 Xcode 的執行 (Run)，然後點擊 App 裡的「產生推薦菜單」...
恭喜你，App 絕對會噴錯！

你會在 Xcode 下方的 Console 看到類似這樣的錯誤訊息：
The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

這也是新手 Vibe Coding 常踩的雷。AI 幫你寫了完美的網路連線程式碼，但它不會主動告訴你：蘋果 (Apple) 預設是禁止 App 發送不安全的 HTTP 請求的。 因為我們 n8n 是架設在本地端的 http://localhost，沒有 SSL 憑證 (HTTPS)，所以直接被 iOS 系統給擋下來了。

解法非常簡單，只要修改專案設定檔：

在 Xcode 左側導覽列找到 Info.plist (如果是純 SwiftUI 專案，請點擊專案藍色 Icon ➔ Targets ➔ Info 頁籤)。
新增一個 Key 叫做 App Transport Security Settings。
展開它，在裡面再新增一個 Key 叫做 Allow Arbitrary Loads，並把值設為 YES。

這樣就成功解除 iOS 對我們本地開發伺服器的封印了！

讓我們真正連線一次吧！

回到 n8n 的畫面，點擊下方大大的 「Execute Workflow」，這時 Webhook 節點會顯示「Listening for test event...」（正在監聽中）。
打開 iOS 模擬器，輸入預算 30000，用途選 3A 遊戲，按下按鈕。
切回 n8n 畫面！你會看到 Webhook 節點右上角亮起綠色的勾勾，點開它，裡面的 JSON 資料已經完美接收到了！