Bit puzzled by a MixedContent issue I've been having.
It's an angular front end deployed in CloudRun with Nginx. For some reason, 99% of the site works perfectly, but one page in particular throws a MixedContent Error.
Mixed Content: The page at 'https://foo' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://foo'. This request has been blocked; the content must be served over HTTPS.
I am certain it is not possible for the angular app to make any http request... there are no hardcoded http values, the url of the API it calls come from environment variables that work perfectly throughout the rest of the site.
Additionally, it works perfectly in Firefox and Edge, and this error only happens in Chrome. Moreover, if I log in to the site, then press refresh once, then navigate to the problem page, it works just fine. So it only happens if I log in and navigate straight to the problem page.
Why would refreshing the page solve the issue? Why does it only happen in Chrome? Totally stuck on this.
I've added upgrade-insecure-requests to the nginx config, but doesn't seem to have changed anything. I've also added a proxy fix to the flask API, also not changed anything.
I can't figure out why it would think the Angular app is sending a http request, when it clearly isn't. If I console the URL just before the request, I can see it is https...