Curious CORS Issue FastAPI/React with TypeScript

I get this "Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure resource '<URL>'. This request has been blocked; the content must be served over HTTPS." error despite specifically fetching endpoints starting with https.

My FastAPI code is set up to allow CORS. I can CURL my endpoints successfully and my website works on mobile (iOS safari), just not on desktop (Google Chrome, Safari, Edge after asking a friend).

There seems to have this odd issue where my requests are made with http on Chrome/Safari despite specifically hard coding https, 200s are sent back, then select desktop browsers see them as a man in the middle attack and block responses.

I've been troubleshooting for the past hours and would like to know if you have experienced this or can lead me to clues?

5d7f21cf-aa01-4a70-bdf8-ab8cf987130e

can you show me the error in the browser console?

the screenshot is a bit cut off

okay now show me the js code that actually makes a request to the projects endpoint

I can make callbacks in useQuery hooks with or without async and they both lead to this.

okay now console log those endpoint variables before fetch

because it's clear to see you have used https when defining the variable, we just need to find out at what stage https is getting stripped away from the variable

that's completely swapped now

the errors in that screenshot are completely expected though

Yes due to the restrictions I put in place when using localhost:5173

you just need to find out what code is inverting https <--> http

This website is deployed

Yeah

What strikes me as odd is how it works on iOS's safari and on Edge on a friend's desktop. My Mac's Chrome and Safari both see this

well I can confidently say that this isn't an issue with railway at least

so yeah just do some digging, find out what's swapping http <--> https

thanks for your help Brody I'm still hunting for the bug

I wish you good luck