The exact URLs/endpoints/etc below have been anonymized.
I have built a very simple web application with Svelte/Sveltekit as the frontend, and FastAPI as the backend. I am hosting each service on Google App Engine. The frontend has URL example.uc.r.appspot.com and the API has URL api-dot-example.uc.r.appspot.com.
My API has an endpoint that can be reached at api-dot-example.uc.r.appspot.com/sample/run, which is supposed to receive some form data and return a simple json based on what it receives. I deployed each service, however, I initially deployed an erroneous version of the frontend that called api-dot-example.uc.r.appspot.com/sampel/run (i.e., a typoed endpoint that does not exist).
Then, I deployed a corrected version and deleted the previous version; now, each service only has one working version. In theory, my deployed frontend should never be calling this erroneous endpoint. However, looking at the in-browser console, I get the following errors:
- upon initial page load:
start.41c53d35.js:1 Mixed Content: The page at 'https://example.uc.r.appspot.com/form' was loaded over HTTPS, but requested an insecure resource 'http://0.0.0.0:8000/sample/run'. This request has been blocked; the content must be served over HTTPS.
- upon reloading the page:
Access to fetch at 'https://api-dot-example.uc.r.appspot.com/sampel/run' from origin 'https://example.uc.r.appspot.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
The first error probably deserves a dedicated question on its own; I am not worried about diagnosing it right at this moment. The second is the same error I was getting before I updated to a version that calls the correct endpoint. Why/how is my application still requesting an endpoint that is not explicitly typed out in the latest version?
For reference, Svelte code that calls this endpoint:
let response = await fetch(
"https://api-dot-example.uc.r.appspot.com/sample/run",{
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
},
)