How to stop mixed Content browser Error when calling App Engine Flexible Environment API?

Question

I'm getting this error in browser:

Mixed Content: The page at 'https://{my-site}' was loaded over HTTPS, but 
requested an insecure XMLHttpRequest endpoint 'http://{my-api}'. This request 
has been blocked; the content must be served over HTTPS.

I know I need to allow https some how. The application uses Gunicorn to run the application on custom Google App Engine Flexible Environment. It also uses flask. Here is my app.yaml:

runtime: custom
env: flex
service: flex-module
entrypoint: gunicorn -b :$PORT main:app

Is it possible to change some setting in the Extensible Service Proxy to allow https in App Engine? Or do I need to get an ssl certificate and key and add the following to my app.yaml:

gunicorn -w3 --certfile=server.crt --keyfile=server.key test:app

Also i'm not sure if i need to add this to a gunicorn.conf.py as in this documentation:

forwarded_allow_ips = '*'
secure_scheme_headers = {'X-APPENGINE-HTTPS': 'on'}

Thanks

Answer 1

As stated in the documentation, Google does not issue SSL certificates for double-wildcard domains that are hosted at appspot.com:

Note: Google recommends using the HTTPS protocol to send requests to your app. Google does not issue SSL certificates for double-wildcard domains that are hosted at appspot.com. Therefore, HTTPS requests must use the string "-dot-" as the URL notation, instead of "." for separating subdomains. You can use the simple "." URL notation with your own custom domains and other HTTP addresses. For more information, see the HTTP and HTTPS examples in the following sections.

So to allow API requests over https and avoid the mixed content browser error, instead of http://version-one.my-app.appspot.com I needed to send request to: https://version-one-dot-my-app.appspot.com