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?