Navigation Failed Because The Request Was For An Http Url With Https-only Enabled 2021 <2026>

We’ve all been there. You click a link, type a URL, or your frontend JavaScript tries to call an API endpoint. Instead of a beautiful UI, you’re greeted by a stark, white page and a confusing console error: “Navigation failed because the request was for an HTTP URL with HTTPS-Only enabled.”

// 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) . We’ve all been there

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. Call your own HTTPS backend, and let your

This is not a server error (404, 500). It is a client-side refusal . The request never actually left your browser. Call your own HTTPS backend