N8n 102 課程錯誤報告:Section 2 - Order Webhook Processor

看起來課程 n8n102 的設計目的是讓學習者感到困擾,首先它在第 1 節的 SendToPriorityQueue 部分有一個尚未解決的 Bug,現在 Webhook 部分也無法跟進,因為測試頁面需要 https,而教程使用的是 http,所以再次在動手練習的開始階段卡住了。以下是 JSON/工作流程錯誤螢幕截圖:

{
“nodes”: [
{
“parameters”: {
“httpMethod”: “POST”,
“path”: “course/n8n102/new-order”,
“authentication”: “headerAuth”,
“responseMode”: “responseNode”,
“options”: {
“allowedOrigins”: “*”
}
},
“type”: “n8n-nodes-base.webhook”,
“typeVersion”: 2.1,
“position”: [
0,
0
],
“id”: “5b647ab0-18c4-41a4-bb01-62fddb40e0d7”,
“name”: “WebhookNewOrder”,
“webhookId”: “cb64f5fc-8c9c-4d7d-abb7-7f3ca5eb7305”,
“credentials”: {
“httpHeaderAuth”: {
“id”: “vMHAPkPKaravjcEZ”,
“name”: “n8n Academy API Key”
}
}
},
{
“parameters”: {
“conditions”: {
“options”: {
“caseSensitive”: true,
“leftValue”: “”,
“typeValidation”: “strict”,
“version”: 3
},
“conditions”: [
{
“id”: “dd887f0b-a710-4f6d-ae7b-4135da5667a8”,
“leftValue”: “={{ $json.body.order_id }}”,
“rightValue”: “”,
“operator”: {
“type”: “string”,
“operation”: “notEmpty”,
“singleValue”: true
}
},
{
“id”: “a7140c1e-23cc-4dba-9662-0059886cdb53”,
“leftValue”: “={{ $json.body.customer_id }}”,
“rightValue”: “”,
“operator”: {
“type”: “string”,
“operation”: “notEmpty”,
“singleValue”: true
}
},
{
“id”: “438dee60-5bcf-4002-927e-280813e11b18”,
“leftValue”: “={{ $json.body.total }}”,
“rightValue”: “”,
“operator”: {
“type”: “number”,
“operation”: “notEmpty”,
“singleValue”: true
}
}
],
“combinator”: “and”
},
“options”: {}
},
“type”: “n8n-nodes-base.if”,
“typeVersion”: 2.3,
“position”: [
208,
0
],
“id”: “9fb45b77-fe7c-4240-848b-deadf5cf8bc7”,
“name”: “ValidateRequiredFields”
},
{
“parameters”: {
“respondWith”: “json”,
“responseBody”: “={\n "status": "accepted",\n "order_id": "{{ $(‘WebhookNewOrder’).item.json.body.order_id }}",\n "message": "Order received and queued for processing"\n}”,
“options”: {
“responseCode”: 200
}
},
“type”: “n8n-nodes-base.respondToWebhook”,
“typeVersion”: 1.5,
“position”: [
416,
-96
],
“id”: “b945dafb-6e2f-461a-8534-414b735b7ab8”,
“name”: “RespondSuccess”
},
{
“parameters”: {
“respondWith”: “json”,
“responseBody”: “={\n "status": "error",\n "message": "Missing required fields: order_id, customer_id, and total are required"\n}”,
“options”: {
“responseCode”: 400
}
},
“type”: “n8n-nodes-base.respondToWebhook”,
“typeVersion”: 1.5,
“position”: [
416,
96
],
“id”: “b23fadc8-b731-444d-bc84-10cb1f7d9f38”,
“name”: “RespondValidationError”
}
],
“connections”: {
“WebhookNewOrder”: {
“main”: [
[
{
“node”: “ValidateRequiredFields”,
“type”: “main”,
“index”: 0
}
]
]
},
“ValidateRequiredFields”: {
“main”: [
[
{
“node”: “RespondSuccess”,
“type”: “main”,
“index”: 0
}
],
[
{
“node”: “RespondValidationError”,
“type”: “main”,
“index”: 0
}
]
]
}
},
“pinData”: {},
“meta”: {
“templateCredsSetupCompleted”: true,
“instanceId”: “1b202188b62737e64678f469a8e86b98e8d2c2147255e95f1e4af4dc019b5e9d”
}
}

@Usman_Waheed ,你可以使用 ngrok。
記得之後更新 webhook 網址

什麼是 ngrok?

ngrok 為您的 n8n 安裝提供公開 https 子域名

感謝,但這將是另一個需要花時間學習的項目。N8N Academy 教程/URL 沒有任何修正嗎?

@Usman_Waheed 如果 ngrok 感覺太複雜,試試 localtunnel - 單一指令,無需帳號:

npx localtunnel --port 5678

它會立即為你生成一個公開的 HTTPS URL。將它貼入 n8n 的 webhook 基礎 URL,課程練習就能運作。在進行練習時保持終端機開啟,完成後再關閉。

我完全不知道該怎麼辦:將它作為你在 n8n 中的 webhook 基礎貼上,然後課程練習就能運作。
從你的 npx 命令中,我得到了這個 URL(終端機是開啟的):https://blue-deer-press.loca.lt

那麼我到底應該把這個 URL 放在哪裡呢,我在 webhook 節點中或任何地方都看不到「基礎 URL」欄位,或者我應該把這個 URL 放在測試頁面的文字方塊中(https://learn.app.n8n.cloud/webhook/course/n8n102/webhook-tester)

???

@Usman_Waheed,直接回答你上一個問題,你不是把 localtunnel URL 貼到 webhook 節點本身。

以下是確切的做法:

第 1 步:在 n8n 中,前往 Settings → General,找到「Webhook URL」或「n8n URL」欄位。將其中的內容替換為你的 localtunnel URL:https://blue-deer-press.loca.lt

第 2 步:保存,然後回到你的 WebhookNewOrder 節點,點擊「Copy Webhook URL」,它現在應該會顯示你的 localtunnel URL,而不是 localhost。

第 3 步:將複製的 webhook URL 貼到課程測試頁面 learn.app.n8n.cloud/webhook/course/n8n102/webhook-tester,作為目標 URL。

第 4 步:確保你的工作流處於「Listen for test event」模式,點擊觸發節點並在測試頁面上點擊該按鈕,然後再點擊發送。

localtunnel 的一個提示:它有時在首次訪問時會顯示瀏覽器警告頁面。如果請求沒有通過,請先在瀏覽器中打開 https://blue-deer-press.loca.lt,接受提示,然後重試測試。

沒有任何設定位置有這個選項,我點擊了這個螢幕截圖中的所有選項,但都沒有提到 Webhook URL 設定的地方,也沒有「一般」設定。請看這個螢幕截圖

我用 gemini 引導我完成 ngrok 的步驟,過程簡短而容易,感謝你的幫助。我的測試通過了,讓我能夠繼續進行課程。

你是怎麼用 ngrok 解決的?

Gemini 傳送了這些步驟,我按照它們操作,問題就解決了:
要取得 https:// URL 並通過此 Academy 模組,你需要使用免費的第三方隧道服務。業界標準(以及 n8n 現在正式推薦用於本機開發的方案)是 ngrok

以下是繞過此障礙的最快方法:

步驟 1:保持 n8n 執行

保持現有的命令提示字元視窗開啟。你的 n8n 執行個體在 http://localhost:5678 上完美執行,我們需要它保持運作以接收資料。

步驟 2:設定 ngrok

我們將建立一條安全的臨時橋樑,從公用網際網路直接連接到你的本機連接埠 5678。

  1. 前往 ngrok.com 並建立免費帳戶。

  2. 下載 Windows 版本並提取 .exe 檔案。

  3. 在提取 ngrok 的資料夾中開啟新的命令提示字元。

  4. 貼上 ngrok 儀表板上顯示的驗證指令以連接你的帳戶(看起來像這樣):ngrok config add-authtoken YOUR_AUTHTOKEN_HERE

  5. 啟動指向 n8n 連接埠的隧道:ngrok http 5678

步驟 3:構建你的新 Webhook URL

當你執行該指令時,ngrok 會輸出一個畫面,其中包含看起來像 https://1234-abcd.ngrok-free.app轉送 URL

需要 n8n 的 UI 實際顯示此 URL,測試才能運作。你只需要將新的安全 ngrok 網域與 webhook 的特定路徑結合。

  • 你的 ngrok 網域: https://1234-abcd.ngrok-free.app (用你實際的 ngrok URL 取代)

  • 你的 webhook 路徑: /webhook/course/n8n102/new-order

  • 你的最終生產 URL: https://1234-abcd.ngrok-free.app/webhook/course/n8n102/new-order

步驟 4:通過 Academy 評估

  1. 回到 n8n Academy Webhook 測試器。

  2. 將你新建構的最終生產 URL(以 https:// 開頭的那個)貼到「你的 Webhook URL」框中。

  3. 確保 n8n 中的 Webhook 節點設定為監聽測試事件

  4. 按一下 Academy 頁面上的執行步驟 1 測試

Academy 測試器會成功驗證 HTTPS 連結,透過 ngrok 傳送負載,ngrok 會直接將其交付到你的本機 n8n 工作流程中!

注意: 如果你實際上想讓 n8n 在 Webhook 節點的 UI 中顯示此新 URL,你必須停止 n8n 並在傳遞環境變數的同時重新啟動它(例如 set WEBHOOK_URL=https://your-ngrok-url.app && npx n8n start)。但是,為了通過此 Academy 測試,手動將組合的 ngrok URL 貼到測試器中要快得多,並達成完全相同的效果。