Hosting Google Cloud Run using Firebase Hosting raises Mixed Content error

Question

I have a Python (FastAPI with uvicorn) application running in Docker container on Google Cloud Run (fully-managed version). I also have a separate web app running on Firebase which uses Firebase hosting. I want to integrate Cloud Run container with Firebase app using Firebase hosting. I set up the hosting config as written in https://firebase.google.com/docs/hosting/cloud-run.

"rewrites": [
  {
    "source": "/api/**",
    "run": {
      "serviceId": "myapp",
      "region": "us-central1"
    }
  },
  {
    "source": "**",
    "destination": "/index.html"
  }
]

My Firebase app calls API using the following code

const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({payload  : payload, temperature: temperature})
    }

fetch('/api/generate', requestOptions)...

However, when I try doing so I get the following error from the browser console:

Mixed Content: The page at 'https://mydomain.web.app/' was loaded over HTTPS, but requested an insecure resource 'http://myapp-somerandomhash-uc.a.run.app/api/generate'. This request has been blocked; the content must be served over HTTPS.

(assuming the Firebase app is hosted on https://mydomain.web.app and Cloud Run app is hosted on https://myapp-somerandomhash-uc.a.run.app)

Current behaviour:

The Firebase app calls https://mydomain.web.app/api/generate
Firebase Hosting redirects it to http://myapp-somerandomhash-uc.a.run.app/api/generate
(I get the above-mentioned error)
The Cloud Run container app again redirects it to https://myapp-somerandomhash-uc.a.run.app/api/generate

Desired behaviour:

The Firebase app calls https://mydomain.web.app/api/generate
Gets response without explicit redirection or redirect to https version

Logs from Cloud Run:

INFO: 169.254.8.129:21990 - "POST /api/generate HTTP/1.1" 307 Temporary Redirect
POST 307 314 B 8ms Chrome 83 https://myapp-somerandomhash-uc.a.run.app/api/generate

Are there any suggestions about how to fix this problem?

What do you expect it to do instead? Are you able to trace the call to your container, and if so, what is it doing with the request? — Doug Stevenson
@DougStevenson I intend to use the cloud run container app as API backend for firebase frontend app. However, because of the mentioned "Mixed Content" error, I cannot call container API from firebase app. — Talgat Omarov
I understand that. What do you expect to happen when you request that URL, other than redirect that you're observing? Please edit the question to be specific, and show any relevant code and logs. — Doug Stevenson
@DougStevenson I expect to call https endpoint on the container instead of http. — Talgat Omarov
Please edit the question to be clear about what exactly should happen. It sounds like you are expecting a specific response, but we need to know what that is, and the code that would send it. Your question should contain enough information so that anyone can reproduce. — Doug Stevenson

Talgat Omarov Talgat Omarov · Accepted Answer · 2020-07-06T18:59:31

I managed to fix my problem. My developing environment was insensitive to trailing slashes, so I missed mismatch between .../api/generate/ and ../api/generate. Thus, after fixing this mismatch everything worked as expected.

I am not entirely sure which part of my stack caused the mentioned-error, but at least with Cloud Run (FastAPI + uvicorn) and Firebase Hosting trailing slashes seems to be important.

Hosting Google Cloud Run using Firebase Hosting raises Mixed Content error

1 Answers