爬蟲逆向工程入門：一篇學會分析 XHR/Fetch，找出任何網站隱藏的 API

你是否在進行網站爬蟲時，遇到了那個最頑固的敵人——動態渲染網站 (SPA)？你明明在上一篇教學中學會了，這類網站的真實數據，並不在第一時間下載的 HTML 原始碼中，而是由瀏覽器後續透過 JavaScript 動態載入的。

雖然使用 Browserless 這類無頭瀏覽器可以解決問題，但它速度慢、成本高，往往是我們最後的手段。那麼，有沒有更高效、更專業、更像「駭客」的解決方案呢？

答案是肯定的。那就是學會「逆向工程 (Reverse Engineering)」網站的前端行為，直接找出並呼叫那個為網頁提供數據的隱藏 API。

這項技巧，是所有進階爬蟲開發者的看家本領。它讓你能夠繞過所有複雜的前端渲染與互動邏輯，直搗黃龍，從數據的源頭——API 端點 (Endpoint)——直接獲取最乾淨、最結構化的 JSON 資料。

這篇文章將是你的爬蟲逆向工程入門實戰指南。我們將帶你化身為一名「API 偵探」，深入探索 Chrome 開發者工具的 Network 面板，手把手教你如何分析網站的 XHR/Fetch 請求，找出任何動態網站背後隱藏的 API，並將其應用在你的 n8n 自動化流程中。

零基礎帶你完成屬於自己的n8n自動化流程

內容目錄

為什麼要當 API 偵探？繞過前端渲染，直搗數據核心

當你面對一個動態網站時，你有兩種爬取策略：

模仿使用者 (User Simulation): 使用 Puppeteer 等無頭瀏覽器，模擬真人的瀏覽、滾動、點擊行為，等待頁面完整渲染後，再從最終的 HTML 中解析資料。
模仿瀏覽器 (Browser Simulation): 直接找出瀏覽器在背景中呼叫了哪些 API 來取得數據，然後讓我們的 n8n 工作流直接去呼叫同一個 API。

為什麼「模仿瀏覽器」通常是更好的選擇？

效率極高： 你不需要載入龐大的 CSS、JavaScript 檔案，更不需要等待整個頁面渲染。你直接請求數據本身，回應速度通常是毫秒級的。
數據品質極佳： API 回傳的，通常是為程式而生的、結構極度清晰的 JSON 格式。你完全不需要再用 HTML Extract 節點去解析混亂的 HTML 標籤，可以直接在 n8n 中處理這些乾淨的數據。
穩定性更高： API 端點通常比前端的 HTML 結構（CSS Selector）更穩定。即使網站改版、按鈕換了位置，只要底層的 API 沒有改變，你的爬蟲就能持續運作。

你的偵錯百寶箱：Chrome 開發者工具 (DevTools) Network 面板詳解

我們執行逆向工程的主要場景，就是你的 Chrome 瀏覽器。而我們的核心工具，就是強大的「開發者工具 (DevTools)」。

如何打開： 在你想分析的網頁上，按下 F12 鍵 (或在頁面空白處右鍵 > 檢查 (Inspect))。
關鍵面板： 在 DevTools 視窗中，找到並切換到「網路 (Network)」面板。

Network 面板就像是你的瀏覽器與網際網路之間所有通訊的「行車記錄器」。它會記錄下你的瀏覽器為了載入當前頁面，所發出的每一個網路請求——從 HTML 主檔案、CSS 樣式表、JavaScript 腳本，到圖片、字體，以及我們最關心的——API 請求。

為了專注在我們的目標上，你需要認識一個重要的篩選器：「Fetch/XHR」。

XHR (XMLHttpRequest): 是一種比較傳統的、用來在背景發送 API 請求的技術。
Fetch: 是更現代化的 API 請求技術。

點擊這個篩選器，Network 面板將只會顯示由頁面上的 JavaScript 所發出的動態數據請求，過濾掉所有其他無關的資源，讓我們的偵查工作事半功倍。

抓取 API 的標準作業流程 (SOP)：五步驟現形所有網路請求

現在，讓我們跟著標準作業流程，一步步找出隱藏的 API。

開啟偵測模式： 前往目標網站，按下 F12 打開 DevTools，並切換到 Network 面板，點擊 Fetch/XHR 篩選器。此時面板應該是空的。
觸發目標行為： 執行你想抓取數據的那個「真人操作」。
- 如果資料是一開始就動態載入的，那就直接「重新整理 (F5)」頁面。
- 如果資料是點擊按鈕後才出現的，那就去「點擊那個按鈕」。
- 如果資料是滾動後才載入的，那就「向下滾動頁面」。
分析請求列表： 當你觸發行為後，你會看到左側的請求列表中，瞬間冒出了數個、甚至數十個新的請求紀錄。這就是我們需要分析的線索。
找出關鍵請求：
- 從名稱判斷： 請求的名稱通常會透露一些線索，例如 getProducts, v1/reviews, search?query=...。
- 逐一排查： 從第一個請求開始，用滑鼠點擊它。
- 檢視「預覽 (Preview)」分頁： 在右側的視窗中，切換到 Preview 分頁。這裡會以一個可以展開的樹狀結構，顯示 API 回應的 JSON 資料。快速掃視一下，這裡面的內容，是不是就是你想要的數據？如果不是，就繼續點擊下一個請求，直到找到為止。
收集犯罪證據 (API 資訊): 一旦你找到了那個包含你寶貴數據的關鍵請求，我們就需要收集所有用來在 n8n 中重現它的必要資訊。切換到「標頭 (Headers)」分頁：
- Request URL: 完整的 API 請求網址。
- Request Method: GET 還是 POST？
- Request Headers: 往下捲動，找到請求標頭區塊。檢查是否有 Authorization, X-API-Key 等可能是身份驗證的標頭。
- Payload (僅 POST): 如果是 POST 請求，切換到「酬載 (Payload)」分頁，查看它發送了哪些資料給伺服器。

實戰演練：找出電商網站「載入更多評論」的背後 API

目標： 某個商品頁面，預設只顯示 3 則評論，需要點擊「顯示更多」按鈕才能看到後續的評論。我們要找出這個按鈕背後的 API。

開啟偵測： 進入商品頁，打開 DevTools > Network > Fetch/XHR。
觸發行為： 在頁面上，用力地點擊「顯示更多」按鈕。
分析請求： 我們看到 Network 列表中，出現了一個新的請求，名稱可能是 reviews?product_id=123&page=2。看起來非常可疑！
找出關鍵請求： 點擊這個請求，切換到 Preview 分頁。果然，裡面清楚地列出了第 4 到第 10 則評論的 JSON 資料，包含作者、評分、內容等。我們找到了！
收集資訊： 切換到 Headers 分頁，我們記錄下：
- Request URL: https://api.example.com/reviews?product_id=123&page=2
- Request Method: GET
- Request Headers: 檢查後發現，沒有特別的認證標頭，這是一個公開的 API。

從偵查到執行：將找到的 API 在 n8n 中重現

有了以上所有資訊，回到 n8n 就變得非常簡單了。

新增一個 HTTP Request 節點。
Request Method: 選擇 GET。
URL: 貼上我們找到的 https://api.example.com/reviews。
Query Parameters > Add Parameter:
- Name: product_id, Value: 123
- Name: page, Value: 2
執行節點。你會發現，它的 Output，就是跟我們在 Preview 分頁中看到的、一模一樣的乾淨 JSON 資料！

逆向工程的倫理與最佳實踐

尊重 robots.txt： 在爬取任何網站前，都應該先查看其 robots.txt 檔案（例如 https://www.example.com/robots.txt），了解網站主是否允許爬蟲訪問特定路徑。
負責任的請求： 即使你找到了 API，也請不要過於頻繁地請求，以免對對方伺服器造成過大負擔。在 n8n 的迴圈中，適時地加入 Wait 節點。
遵守服務條款： 許多網站的服務條款 (Terms of Service) 會明確禁止自動化抓取其數據。進行爬取前，請確保你的行為符合相關規範。