Pozor na ad blockery – mohou blokovat i běžné požadavky na backend

Rádi byste uživatelům na frontendu vykreslili obsah, ale ne a ne úspěšně získat odpověď od API serveru? Pojďme si projít zřejmé i méně zřejmé zdroje problému.

Identifikace problému

K tomuto článku mě vedla situace, kdy jsem vyvíjel aplikaci pro Chci flek!. Jednoho odpoledne jsem se snažil z localhostu kontaktovat API server na klasické doméně, ale nepřicházela mi zpět žádná data. Backend byl postavený na jazyce Go a stál za nginx proxy serverem.

Poznámka: nejprve jsem i backend testoval na lokálním stroji. Problémy se objevily až po přesunutí na finální doménu. To by nutně nemuselo znamenat nic neobvyklého, kdyby se mi dařilo situaci vyřešit klasickými způsoby.

Investigace problému

Kde byl (nebo ve vašem případě může být) zakopaný pes? Postupně popíšu několik svých teorií, které jsem postupně ověřoval, až mi nezbylo nic jiného, než hledat další možná řešení na internetu. Možná, že kdybych si hned všiml hlášky BLOCKED_BY_CLIENT, mohl jsem hledáním strávit o něco méně času (o hodně méně času).

Špatná URL adresa požadavku

Jako první mě samozřejmě napadlo, že se mi do adresy serveru nebo endpointu vloudila chyba. I po překontrolování cesty se ale všechno zdálo v pořádku, a proto se mým dalším kandidátem stalo CORS.

Zkontrolujte, že opravdu odesíláte požadavky na adresu, na kterou potřebujete. Můžete to ověřit například s pomocí Google Chrome Developer Tools v záložce Network.

CORS politika

Druhou zastávkou byl konfigurační soubor pro nginx u domény, na které API běželo. CORS je řešené právě v tomto souboru a bylo možné, že jeho nastavení kompletně chybělo nebo nebyly povoleny požadavky z domény, z níž jsem se snažil se serverem komunikovat.

Ani tady jsem žádný problém neodhalil a i při povolení požadavků ze všech domén se mi žádné odpovědi serveru nedostalo.

Ujistěte se, že máte správně nastavený CORS. Při špatné konfiguraci může server vaše javascriptové požadavky z prohlížeče blokovat. Mrkněte se na náš článek o konfiguraci CORS.

Blokátor reklam

Když už jsem byl opravdu ztracený, začal jsem hledat problém úplně všude – logoval jsem všechny možné proměnné do konzole, zkoumal znovu obsah odeslaných i přijatých požadavků a znovu zkontroloval URL adresu a CORS.

Po nějaké době jsem si v konzoli všiml chyby BLOCKED_BY_CLIENT. Ta samozřejmě značila, že je problém v prohlížeči, v tomto případě konkrétně v doplňku uBlock Origin. Ten zablokoval přístup k API endpointu, protože URL adresa obsahovala adverts.

Tuto skutečnost jsem sám ověřil jak vypnutím doplňku, tak odstraněním přislušných řádků ze seznamu blokovaných slov nebo částí adres v nastavení doplňku.

Zjistěte, jestli nemáte zaplý doplněk pro blokování reklam. Ten můžete mít povolený i v anonymním režimu. Zkuste doplněk vypnout a stránku znovu načíst. Pokud byl problém způsobený blokátorem reklam, měla by vaše komunikace se serverem už kompletně fungovat.

Vyřešení problému

Protože není v mých silách ovlivnit chování doplňků pro blokování reklam jako je uBlock nebo AdBlock, nejkorektnějším řešením bylo v tomto případě změnit název endpointu – URL, na kterou se frontend připojuje. Slovo adverts jsem vyměnil za offers a vše běželo (a dodnes běží) jako po másle.

Na jaké další, třeba i ještě více záhadnější problémy jste narazili vy? Dejte mi vědět na [email protected].