Scrapowanie dynamicznych stron
Dynamiczne strony internetowe ładują treść przy użyciu JavaScript po początkowym załadowaniu strony. Ten przewodnik pokazuje, jak zbierać dane z tych stron przy użyciu endpointu przeglądarki FourA.
Problem
Gdy wysyłasz standardowe żądanie HTTP do strony internetowej opartej w dużej mierze na JavaScript, otrzymujesz powłokę HTML, ale nie rzeczywistą treść. Potrzebne dane (listy produktów, ceny, wyniki wyszukiwania) są ładowane przez JavaScript po wyrenderowaniu strony w przeglądarce.
Jest to coraz częstsze w przypadku nowoczesnych frameworków, takich jak React, Vue, Angular i Next.js.
Rozwiązanie: Żądania przeglądarki
Endpoint przeglądarki FourA (POST /api/browser/) otwiera Twój URL w instancji przeglądarki Chrome, która:
- Ładuje stronę
- Wykonuje cały JavaScript
- Czeka na wyrenderowanie treści
- Zwraca w pełni wyrenderowany HTML
Krok 1: Określ, czego potrzebujesz
Przed wykonaniem żądania odwiedź stronę docelową w przeglądarce i użyj DevTools (F12), aby znaleźć fragment tekstu lub element, który potwierdza załadowanie treści. Na przykład:
- Nazwa produktu, która pojawia się po wyrenderowaniu przez JS
- Klasa CSS, taka jak
product-gridw wyrenderowanym HTML - Ciąg tekstowy, taki jak "results", który pojawia się tylko po załadowaniu danych
Krok 2: Wyślij żądanie przeglądarki
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"
}'
Opcja checkText mówi usłudze FourA, aby zweryfikowała, czy ciąg znaków "product-grid" pojawia się na wyrenderowanej stronie. Jeśli nie pojawi się przed upływem limitu czasu, request kończy się niepowodzeniem, informując, że treść nie została załadowana.
Krok 3: Parsowanie kodu HTML
Obiekt response zawiera w pełni wyrenderowany kod HTML w polu body. Sparsuj go za pomocą preferowanej biblioteki:
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());
});
Rozwiązywanie problemów
Nadal otrzymujesz pustą treść?
- Sprawdź, czy strona faktycznie używa renderowania JavaScript (porównaj "Wyświetl źródło" z DevTools)
- Zwiększ
timeout_ms: niektóre strony ładują się powoli - Sprawdź, czy strona wymaga uwierzytelnienia lub plików cookie (użyj parametru
cookies)
Otrzymujesz stronę z CAPTCHA?
- Dla pojedynczych żądań HTTP przełącz się na endpoint proxy (
POST /api/proxy/) w celu automatycznej rotacji IP. - Aby przekierować żądanie przeglądarki przez proxy, przekaż parametr
proxyendpointu przeglądarki. Endpoint proxy opakowuje tylko pojedyncze żądania HTTP, a nie żądania przeglądarki.
Parametr proxy przyjmuje nieprzezroczysty identyfikator proxy, który został zwrócony we wcześniejszej odpowiedzi, nigdy własny adres proxy. Uruchom najpierw jedno wywołanie POST /api/proxy/ (lub POST /api/auto/), odczytaj zwrócone w nim pole proxy, a następnie przypnij je:
# 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}'
Wysłanie adresu zamiast ID zwraca 400 Invalid proxy format. Pełny wzorzec znajduje się w Ponowne użycie proxy w wielu żądaniach.
Następne kroki
- Wybór właściwego endpointu: Kiedy używać przeglądarki, a kiedy pojedynczego żądania
- Monitorowanie cen konkurencji: Pełny samouczek śledzenia cen
- Ochrona Anti-Bot: Obsługa chronionych witryn
- Ponowne użycie proxy w wielu żądaniach: Przypięcie jednego węzła wyjściowego dla całego przepływu pracy