文档 › 操作指南 › 抓取动态网站

抓取动态网站

动态网站在初始页面加载后通过 JavaScript 加载内容。本指南介绍如何使用 FourA 的浏览器 endpoint 从此类网站采集数据。

问题所在

当您向高度依赖 JavaScript 的网站发送标准 HTTP request 时，只会获取到 HTML 外壳，而非实际内容。所需的数据（商品列表、价格、搜索结果）是在页面于浏览器中渲染后由 JavaScript 加载的。

这在 React、Vue、Angular 和 Next.js 等现代框架构建的站点中越来越常见。

解决方案：Browser Requests

FourA 的浏览器 endpoint (POST /api/browser/) 会在 Chrome 浏览器实例中打开您的 URL，该实例将：

  1. 加载页面
  2. 执行所有 JavaScript
  3. 等待内容渲染完成
  4. 返回完全渲染后的 HTML

步骤 1：确定所需内容

在发起 request 之前，先在浏览器中访问目标页面，并使用 DevTools (F12) 找到一段文本或元素，用以确认内容已加载完成。例如：

  • JS 渲染后才出现的商品名称
  • 渲染后 HTML 中的 CSS 类，例如 product-grid
  • 仅在数据加载完成后才出现的文本字符串，例如 "results"

步骤 2：发送 Browser Request

curl -X POST https://eu.api.foura.ai/api/browser/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/products",
    "timeout_ms": 15000,
    "checkText": "product-grid"
  }'

checkText 选项指示 FourA 在页面加载完成后检查其中是否包含 "product-grid"。如果不包含，请求将失败并返回 checkText:product-grid not found，且失败的请求不会计费。checkText 不会让 FourA 延长等待文本的时间。

步骤 3：解析 HTML

响应在 body 字段中包含完全渲染的 HTML。使用您首选的库对其进行解析：

Python (BeautifulSoup)

import requests
from bs4 import BeautifulSoup

resp = requests.post("https://eu.api.foura.ai/api/browser/", headers={
    "X-API-Key": "YOUR_API_KEY",
    "Content-Type": "application/json"
}, json={
    "url": "https://example.com/products",
    "timeout_ms": 15000,
    "checkText": "product-grid"
})

html = resp.json()["body"]
soup = BeautifulSoup(html, "html.parser")

for product in soup.select(".product-card"):
    name = product.select_one(".product-name").text.strip()
    price = product.select_one(".product-price").text.strip()
    print(f"{name}: {price}")

Node.js (cheerio)

import * as cheerio from 'cheerio';

const resp = await fetch('https://eu.api.foura.ai/api/browser/', {
  method: 'POST',
  headers: { 'X-API-Key': 'YOUR_API_KEY', 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://example.com/products',
    timeout_ms: 15000,
    checkText: 'product-grid'
  })
});

const { body: html } = await resp.json();
const $ = cheerio.load(html);

$('.product-card').each((i, el) => {
  console.log($(el).find('.product-name').text(), $(el).find('.product-price').text());
});

故障排查

仍然获取到空内容？

  • 验证页面是否确实使用 JavaScript 渲染（对比“查看源代码”与 DevTools）
  • 增加 timeout_ms：部分页面加载较慢
  • 检查页面是否需要身份验证或 cookie（使用 cookies 参数）

遇到验证页面？

  • 对于单次/HTTP request，请切换至 proxy endpoint（POST /api/proxy/）以实现自动 IP 轮换。
  • 若要通过 proxy 路由浏览器 request，请传递浏览器 endpoint 的 proxy 参数。proxy endpoint 仅封装单次/HTTP request，不适用于浏览器 request。

proxy 参数接收早期 response 返回的不透明 proxy ID，切勿传入您自己的 proxy 地址。请先运行一次 POST /api/proxy/（或 POST /api/auto/）调用，读取其返回的 proxy 字段，然后进行固定：

# Step 1: let FourA find a working exit. The response carries "proxy": "A1B2C3".
curl -X POST "https://eu.api.foura.ai/api/proxy/" \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"maxTries": 5, "request": {"method": "GET", "url": "https://example.com/products"}}'

# Step 2: render through that same exit.
curl -X POST "https://eu.api.foura.ai/api/browser/" \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com/products", "proxy": "A1B2C3", "timeout_ms": 20000}'

发送地址而非 ID 会返回 400 Invalid proxy format。完整模式请参阅 跨请求复用 Proxy。

下一步

更新于： 2026年9月27日
监控竞品价格 →