Mixed Content: the page was loaded over HTTPS but requested an insecure resource

What it means in plain English

Your live site is secure (https), but it tries to load something over plain http. Browsers block or upgrade those requests, so API calls or images fail.

Likely causes

• An API base URL env var set to http://… (often http://localhost or an IP).
• Hard-coded http:// image or script links.
• A backend on a raw IP address without HTTPS.

How to fix it, step by step

1. DevTools Console → note each blocked URL.
2. Change them to https://. Update env vars (e.g. VITE_API_URL) and redeploy.
3. If the backend has no HTTPS, put it behind a domain with a certificate (or host it on a platform that provides one).
4. Never point production at localhost.

How to check it worked

• Console shows no mixed content warnings; requests succeed.

Sources

• https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content (opens in a new tab)