Navigation Failed Because The Request Was | For An Http Url With Https-only Enabled

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.

Audit your code for stray http:// references today—your users’ browsers are already doing the same. Call your own HTTPS backend, and let your

// Option A: Protocol-relative (Uses whatever the parent page uses) fetch('//mybackend.com/api/data'); // Option B: Absolute HTTPS (Forces encryption) fetch('https://mybackend.com/api/data'); HTTPS-Only mode forces the browser to automatically upgrade

// Option C: Just use a relative path if on the same origin fetch('/api/data'); If the browser is trying to access your http:// resource because your server is misconfigured, you can train the browser to never use HTTP again via HTTP Strict Transport Security (HSTS) . Call your own HTTPS backend

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.

https://yourapp.com/api/proxy ➔ Your Server (Node.js/NGINX): http://legacy-vendor.com/data ➔ Back to Browser.