Mixed Content 🔌 API

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

An HTTPS page tried to load a script, API or image over plain HTTP, and the browser blocked (or warned about) it.

Seen on: WordPress Nginx PHP JavaScript

Meaning

Browsers block active mixed content (scripts, fetch/XHR, iframes) on HTTPS pages and auto-upgrade or warn about passive content (images). It usually appears after moving a site to HTTPS while URLs in code, config or the database still say http://.

Common causes

  • Hard-coded http:// URLs in code, templates or the database (WordPress site URL)
  • API base URL configured with http in production
  • App behind an HTTPS proxy generates http URLs (doesn’t trust X-Forwarded-Proto)
  • Third-party embed only available over HTTP

⚡ Quick fix

  1. Switch URLs to https:// (or root-relative /path)
  2. Make the app trust the proxy’s X-Forwarded-Proto so it builds https URLs
  3. Add Content-Security-Policy: upgrade-insecure-requests as a safety net

Detailed fix by platform

WordPress

  1. Update Settings → General URLs to https and search-replace old URLs in the database (wp search-replace 'http://example.com' 'https://example.com').

Nginx

  1. Upgrade stragglers automatically:
    nginx
    add_header Content-Security-Policy "upgrade-insecure-requests" always;

PHP

  1. Laravel behind a proxy: configure TrustProxies and set APP_URL=https://….

How to diagnose

  1. Console — Which URL was blocked?
  2. Source — Hard-coded, config, DB or generated?
  3. Proxy — Does the app know it is served over HTTPS?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.