I'm building a Svelte app that fetches random quotes from an API (https://zenquotes.io/api/random). The app works perfectly on desktop browsers but fails to fetch data on mobile devices (both locally and when deployed on Netlify).
Here's What I've Tried:
Tested the API directly in both desktop and mobile browsers – it works fine in both.
Confirmed the app works locally on http://localhost:5173 for desktop, but mobile devices fail to fetch data (even on the same local network).
Deployed the app on Netlify using HTTPS – still doesn't work on mobile. I also ensured the Netlify build settings were correct.
Tried debugging with Chrome DevTools on mobile. I noticed a CORS error and net::ERR_FAILED when fetching the API.
Considered a proxy to bypass CORS, but I would like to avoid this if possible.
Switched to different free quote APIs, including zenquotes.io, but the issue persists on mobile devices.
async function fetchQuote() { try { const response = await fetch('https://zenquotes.io/api/random', { method: 'GET', headers: {'Content-Type': 'application/json', }, }); if (!response.ok) throw new Error('Failed to fetch quote'); const data = await response.json(); quote = data[0].q; author = data[0].a; } catch (error) { console.error('Fetch Error:', error); quote = 'Could not fetch a quote.'; author = 'Unknown'; }}How can I ensure my fetch requests work on mobile devices? Is there a known issue with mobile CORS policies or SSL validation, and what would be the best way to resolve this?