Mixed Content: requested an insecure resource

Your secure https page tried to load data or code over plain http, and the browser blocked that request to keep the page secure.

Browser console
Mixed Content: The page at 'https://my-app.com/' was loaded over HTTPS, but requested an insecure resource 'http://api.example.com/items'. This request has been blocked; the content must be served over HTTPS.

Also appears as

  • Mixed Content: The page at 'https://my-app.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.example.com/items'. This request has been blocked; the content must be served over HTTPS.
  • Blocked loading mixed active content “http://api.example.com/items”
  • [blocked] The page at https://my-app.com/ requested insecure content from http://api.example.com/items. This content was blocked and must be served over HTTPS.

Prompt to fix it

My published site logs "Mixed Content: ... requested an insecure resource" in the browser console. Find every http:// URL the app requests, in code, config, and environment variables, and switch each to https:// or a relative path. If the code already uses https, check whether the server redirects to http, for example a trailing-slash redirect behind a proxy, and fix that redirect on the server. If the API has no HTTPS at all, tell me. Don’t ask users to allow insecure content in their browser settings.

Paste into Layerwise or any AI coding tool.

What it means

A page served over https:// is encrypted. If it calls an http:// URL, that request would travel unencrypted, where anyone on the network could read or change it. Browsers block such requests for API calls, scripts, and frames, and the fetch call then fails with Failed to fetch. Chrome upgrades images and media to https:// on its own, so API calls are where this usually shows up.

It almost always appears right after publishing. Locally, everything runs on http://localhost, so an http:// API URL works. After deploy the page is on HTTPS, and the same URL is suddenly blocked.

Sometimes the code already uses https:// and the error still names an http:// URL. That happens when the server redirects, for example to add a trailing slash, and builds the new URL with http:// because it sits behind a proxy that handles HTTPS. The Network tab shows that redirect.

Common causes

  • The API base URL in the code or an environment variable starts with http://.
  • The backend redirects to an http:// address, often a trailing-slash redirect behind a proxy.
  • The API server has no HTTPS at all, such as a bare IP address or a server without a certificate.
  • A hardcoded script, iframe, or stylesheet URL uses http://.

How to fix it

  1. Note the exact http:// URL named in the console message.
  2. Change it to https://, usually in the API URL environment variable on your host, then redeploy.
  3. If the code already uses https://, look for a redirect to http:// in the Network tab. Fix it on the server, for example by trusting the proxy’s forwarded headers, or call the final URL directly.
  4. If the server has no HTTPS, put it behind a host or proxy that provides a certificate, such as Cloudflare or Caddy.
  5. Call your own backend with relative URLs like /api/items when it shares the site’s domain, so the scheme always matches.

Example fix

# Blocked on the published https site:
# VITE_API_URL=http://api.example.com
VITE_API_URL=https://api.example.com

Related errors

All errors
TypeError: Failed to fetch

Failed to fetch

The browser never got a usable response: the server was unreachable, or the browser blocked the request or its reply.

This page isn’t working my-app.com redirected you too many times. Try deleting your cookies. ERR_TOO_MANY_REDIRECTS

ERR_TOO_MANY_REDIRECTS

The site keeps redirecting the browser in a circle, usually between HTTP and HTTPS or between two domains, so the browser stops trying.

Access to fetch at 'https://api.example.com/items' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Blocked by CORS policy

The browser hid a response from another site because that server never said your site is allowed to read it.

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Your code expected JSON, but the server sent back an HTML page, usually a 404 page or your app’s own index.html.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs