// 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');
Add this header to your server (Apache/NGINX): // Option A: Protocol-relative (Uses whatever the parent
The golden rule of 2026 is simple: APIs, images, iframes, and fonts. The error message is actually very literal
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. Call your own HTTPS backend
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.
