Mixed Content: page loaded over HTTPS requested an insecure resource
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. This request has been blocked.In short: Your HTTPS site tried to call an http:// URL, and the browser blocked it.
Why it happens
Hosting gives you HTTPS automatically, but an API URL, image, or script still uses http://. Browsers block insecure requests from secure pages.
How to fix it
- Change the URL to
https://. If the API doesn't support HTTPS, call it from your server instead of the browser. - Check env vars on your host for
http://values. - For images and scripts from third parties, use their HTTPS URLs or self-host them.
Don't: Don't serve your whole site over HTTP to make it go away.
Copy-paste fix prompt
I'm getting this error in my app: Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. This request has been blocked. [Paste the full error, stack trace, and the file it points to here] Likely cause: Your HTTPS site tried to call an http:// URL, and the browser blocked it. Task: Find every http:// URL used by the frontend, switch each to https or route it through a server endpoint, and list any third party that lacks HTTPS. Rules: - First explain the root cause in 2 sentences and list the files you'll change. - Make the smallest change that fixes it. Don't refactor unrelated code. - Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear. - Never print or hard-code secret keys. - Finish by telling me exactly how to verify the fix.
Common with: Cursor, Bolt, Replit. Last reviewed 2026-11-13.
Did this fix it?
(Placeholder: feedback isn't recorded yet.)