Chrome పనిచేసింది. Firefox విఫలమైంది.

నేను ఒకే పేజీని రెండు బ్రౌజర్‌లలో పక్కపక్కనే చూశాను.

Chromeలో: పేజీ అద్భుతంగా పనిచేసింది. అందులో చిత్రాలు, బటన్లు మరియు ఫలితాల పూర్తి జాబితా ఉన్నాయి.

Firefoxలో: పేజీ ఖాళీగా ఉంది. చిత్రాలు లేని ప్లేస్‌హోల్డర్ కార్డ్‌లు మరియు "0 results found" అనే సందేశం మాత్రమే కనిపించాయి.

కోడ్ ఒక్కటే. URL కూడా ఒక్కటే. సర్వర్ కూడా బాగుంది.

సమస్య బ్రౌజర్‌లోనే ఉంది.

Firefox 'Enhanced Tracking Protection'ను ఉపయోగిస్తుంది. చాలా మంది వినియోగదారులు uBlock Origin వంటి సాధనాలను కూడా ఉపయోగిస్తారు. ఇవి ట్రాకర్లుగా భావించే డొమైన్‌లకు వెళ్లే రిక్వెస్ట్‌లను బ్లాక్ చేస్తాయి.

నా యాప్ Supabase డొమైన్ నుండి డేటాను సేకరించింది (fetch చేసింది). Firefox దృష్టిలో, ఆ డొమైన్ ఒక థర్డ్-పార్టీ ట్రాకర్‌లా కనిపించింది. ఆ రిక్వెస్ట్ మెషీన్ నుండి బయటకు వెళ్లే ముందే బ్రౌజర్ దానిని బ్లాక్ చేసింది.

fetch విఫలమవ్వడం వల్ల, నా కోడ్ 'fallback state'ను చూపించింది. అది క్రాష్ కాలేదు. కన్సోల్‌లో ఎటువంటి ఎర్రర్ కూడా చూపలేదు. కేవలం ఒక ఖాళీ పేజీని మాత్రమే చూపించింది.

ఇది రెండు రకాల బ్లైండ్ స్పాట్‌లను (blind spots) సృష్టించింది:

నేను థర్డ్-పార్టీ రిక్వెస్ట్ నుండి ఫస్ట్-పార్టీ రిక్వెస్ట్‌కు మారడం ద్వారా దీనిని పరిష్కరించాను.

వెండర్ డొమైన్‌ను నేరుగా పిలవడానికి బదులుగా, నేను ఒక రివర్స్ ప్రాక్సీని ఉపయోగించాను. నేను APIని నా స్వంత డొమైన్ ద్వారా రూట్ చేశాను.

ముందు: mysite.com xxxx.supabase.co ని పిలుస్తుంది (Blocked) తర్వాత: mysite.com mysite.com/sb-api ని పిలుస్తుంది (Trusted)

ఇప్పుడు, బ్రౌజర్ దానిని 'same-origin request'గా చూస్తుంది. ఇది డేటా కాల్‌ను సైట్‌లో భాగంగానే పరిగణిస్తుంది.

మీరు ఇలాంటి సమస్యలను ఎదుర్కొంటే, ఈ మూడు విషయాలను గుర్తుంచుకోండి:

• మీ websockets పట్ల జాగ్రత్తగా ఉండండి. సాధారణ పాత్ రీరైట్స్ (path rewrites) రియల్ టైమ్ కనెక్షన్‌లను దెబ్బతీయవచ్చు. • మీ auth storage కీలను ఫిక్స్ చేయండి (Pin). URL మార్చడం వల్ల బ్రౌజర్ లాగిన్ సెషన్‌లను ఎలా స్టోర్ చేస్తుందనేది మారవచ్చు. • మీ కంటెంట్‌ను ప్రీ-రెండర్ (Prerender) చేయండి. మీ పేజీ పూర్తిగా JavaScript మీద ఆధారపడేలా చేయకండి. ఒకవేళ బ్రౌజర్ మీ స్క్రిప్ట్‌ను బ్లాక్ చేస్తే, వినియోగదారుడు HTMLలో కనీసం ప్రధాన కంటెంట్‌ను చూడగలిగేలా ఉండాలి.

Chromeలో పనిచేస్తే అందరికీ పనిచేస్తుందని అనుకోవడం మానేయండి. ప్రైవసీ ఎక్స్‌టెన్షన్‌లను ఆన్ చేసి పరీక్షించండి.

Source: https://dev.to/henry_dan_81513dd35a2f540/chrome-showed-the-data-firefox-showed-nothing-the-api-was-being-blocked-4mpn