// 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) .
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. // Option C: Just use a relative path
The golden rule of 2026 is simple: APIs, images, iframes, and fonts. In this case, do not call the HTTP
// 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'); // Option A: Protocol-relative (Uses whatever the parent
This is not a server error (404, 500). It is a client-side refusal . The request never actually left your browser.
