Vibe Coding 卡關了?教你用 Request API 直接抓網頁資料

Vibe Coding 卡關了?教你用 Request API 直接抓網頁資料

引言

最近 vibe coding 的風潮席捲開發者社群,不少人開始靠著 AI 輔助,用自然語言描述需求、讓 AI 產生程式碼,整個開發流程行雲流水。但只要碰到「抓網頁資料」這個需求,很多人就會撞牆——你跟 AI 說「幫我爬這個網站的資料」,AI 卻回你:

「這個資料沒有顯示在 HTML 上,無法直接擷取。」

或是好不容易讓 AI 寫出了 BeautifulSoup 的爬蟲,跑起來卻一片空白;又或者叫 AI 去找 API 網址,它東猜西猜就是抓不到正確的端點。整個 vibe coding 的節奏就這樣被打斷,不知道下一步該怎麼辦。

其實這個問題有一個非常乾淨的解法:直接找網站背後的 Request API,跳過 HTML,把資料原汁原味地拿回來。 本文就帶你搞懂這個思路,以及怎麼實際操作。

為什麼 BeautifulSoup 和 Selenium 會失敗?

傳統爬蟲的做法大概分兩派:

  1. BeautifulSoup4:解析靜態 HTML,適合資料直接寫在頁面原始碼裡的情況。
  2. Selenium:模擬瀏覽器行為,可以等 JavaScript 執行完再擷取內容。

這兩個方法都有一個共同的前提:資料最終會出現在 DOM 上。但現代網站越來越多是「前後端分離」的架構——頁面本身只是一個空殼,資料是瀏覽器在背景透過 API 呼叫取回來的。這種情況下,不管你用 BeautifulSoup 解析 HTML,還是用 Selenium 等頁面載入,你拿到的都不會是你要的資料。

更麻煩的是,用這兩個方法還得額外花時間處理:

  • 💡 在頁面上定位元素的位置(CSS selector、XPath)
  • 💡 把抓下來的非結構化資料再整理成乾淨的格式

繞了一大圈,還不一定成功。

更好的做法:直接打 API

既然資料是瀏覽器透過 API 拿回來的,我們何不直接走同一條路?

瀏覽器的開發者工具(DevTools)裡的 Network 分頁,會完整記錄頁面和伺服器之間的所有請求。只要打開它,在網站上觸發你想要的操作(例如搜尋、換頁),就能看到背後實際發出的 API 請求,包括網址、參數、回傳的 JSON 資料,一覽無遺。

找到之後,用 Python 的 requests 套件,幾行程式碼就能重現同樣的請求,直接拿到結構化的 JSON,完全不需要解析 HTML。

實作範例一:LINE 事實查核中心

找到目標網站

LINE 事實查核中心 提供了大量的謠言查核文章,是一個很適合練習的目標。

LINE 事實查核中心首頁

打開 DevTools,觀察 Network 請求

按下 F12 開啟開發者工具,切換到 Network 分頁,接著在頁面上觸發你想要的操作(例如滾動頁面或點選分類),就能看到瀏覽器在背景發出的所有請求。

Network 分頁概覽

篩選 XHR 或 Fetch 類型的請求,找到回傳文章資料的那一筆。

找到目標 API 請求

點進去可以看到完整的請求網址與參數。

請求詳細資訊

切換到 Response 分頁,確認回傳的就是你要的資料。

Response 內容

直接取得乾淨的 JSON 結構,所有文章資訊一目瞭然。

JSON 回傳結果

requests 重現請求

找到 API 端點之後,呼叫方式非常簡單:

1
2
3
4
5
6
import requests

# 方法一:直接把參數夾在 URL 裡
full_url = "https://api-fact-checker.line-apps.com/pub/v1/zhtw/articles/..."
response = requests.get(full_url)
print(response.json())

或是更乾淨的寫法,把參數獨立出來:

1
2
3
4
5
6
7
8
9
# 方法二:用 params 參數傳遞,requests 會自動組成 query string
base_url = "https://api-fact-checker.line-apps.com/pub/v1/zhtw/articles/verified/"
params = {
"size": 9,
"sort": "updatedAt",
"loc": "home"
}
response = requests.get(base_url, params=params)
print(response.json())

回傳的直接是 JSON,不需要任何額外解析,可以直接取用你要的欄位。

實作範例二:台鐵列車時刻表

找到目標網站

台鐵列車時刻查詢 的搜尋表單,背後同樣是透過 API 取得資料。

台鐵時刻查詢頁面

攔截 POST 請求

填入出發站、到達站、日期等資訊後按下查詢,在 Network 分頁就能看到一筆 POST 請求,裡面包含表單送出的所有 payload。

台鐵 API 請求 payload

requests 重現請求

這個案例用的是 POST 方法,並且帶有 CSRF token(這是網站用來防止跨站請求偽造的安全機制):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import requests

url = 'https://www.railway.gov.tw/tra-tip-web/tip/tip001/tip112/querybytime'
payload = {
"csrf": "2cad25fc-a9c1-4852-b57e-b720a4259ef3",
"startStation": "0900-基隆",
"endStation": "1010-萬華",
"transfer": "ONE",
"rideDate": "2024/05/01",
"startOrEndTime": "true",
"startTime": "00:00",
"endTime": "23:59",
"trainTypeList": "ALL",
"queryClassification": "NORMAL",
"query": "查詢"
}

response = requests.post(url, data=payload)
print(response.text)

注意這裡用的是 requests.post(),並透過 data 參數傳遞 form data,而不是 json 參數——因為這個 API 接受的是表單格式,不是 JSON body。

整個流程只需要三步

  1. 打開瀏覽器 DevTools(F12),切換到 Network 分頁
  2. 在網站上操作你想抓的資料(搜尋、點選、換頁),觀察出現的請求,找到回傳目標資料的那一筆
  3. 複製 API 網址和參數,用 requests 重現請求

這個流程跑順之後,你也可以直接把 DevTools 的 Network 請求資訊截圖,或是把 Request Headers、Payload、Response 貼給 AI,請它幫你把 requests 的程式碼寫出來——這樣才是真正讓 vibe coding 流起來的姿勢。

小結

AI 說「資料不在 HTML 上」的時候,它說的沒錯,但其實有時候資料有可能也會藏在 API 裡,去 DevTools 找它。 學會用 Request API 的思路,你就多了一把鑰匙,能打開大多數現代網站的資料大門,也不會再讓爬蟲問題打斷你的 vibe coding 節奏。


Vibe Coding 卡關了?教你用 Request API 直接抓網頁資料
https://milanochuang.github.io/2026/04/04/Vibe coding 卡關了?教你用 Request API 直接抓網頁資料/
作者
Hao-Yun Chuang (Milan)
發布於
2026年4月4日
許可協議