This is not a server error (404, 500). It is a client-side refusal . The request never actually left your browser.
If you are using Firefox (which popularized this feature) or any modern browser with strict security settings, you’ve likely hit this wall. In this post, we’ll break down why this happens, where the request is actually going, and three concrete ways to fix it without turning off security entirely. The error message is actually very literal. Your browser attempted to fetch a resource (an image, a script, an API endpoint, or a page navigation) using the standard http:// protocol. However, the browser’s internal HTTPS-Only Mode is active, and it is refusing to downgrade to unencrypted HTTP.
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload Once the browser sees this header, it will automatically convert all future http:// requests to https:// before they are sent, eliminating the error. Sometimes you cannot control the external API—maybe a legacy vendor only serves HTTP. In this case, do not call the HTTP endpoint directly from the browser. Call your own HTTPS backend, and let your server proxy the request to the HTTP vendor. This is not a server error (404, 500)
https://yourapp.com/api/proxy ➔ Your Server (Node.js/NGINX): http://legacy-vendor.com/data ➔ Back to Browser.
April 14, 2026 | Reading Time: 4 minutes If you are using Firefox (which popularized this
The “Navigation Failed” Paradox: Debugging HTTP Requests in an HTTPS-Only World
HTTPS-Only mode forces the browser to automatically upgrade every request to HTTPS. If the upgrade fails (or if you explicitly hardcode http:// ), the browser throws an error instead of falling back to unsafe HTTP. You cannot fix this by telling your users to turn off HTTPS-Only mode. Instead, you need to fix your code or infrastructure. Fix 1: Use Protocol-Relative or Absolute HTTPS URLs (The Easiest) Never hardcode http:// or https:// in your frontend code. Use protocol-relative URLs (starting with // ) or absolute paths. Your browser attempted to fetch a resource (an
fetch('http://mybackend.com/api/data'); <img src="http://cdn.example.com/logo.png">