[FIXED] Mixed Content: The page at {URL} was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint {ENDPOINT}

Issue

I have the following projects https://github.com/codyc4321/dividends_ui and https://github.com/codyc4321/stocks_backend. The deployed app at https://octopus-app-8l8j5.ondigitalocean.app/ is getting error

Mixed Content: The page at 'https://octopus-app-8l8j5.ondigitalocean.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://67.205.161.47:8000/dividends/wba'. This request has been blocked; the content must be served over HTTPS.

this is the error I got last week but now I have gone through and done https://timonweb.com/django/https-django-development-server-ssl-certificate/ and am running the python server with https:

root@username:~/stocks_backend# python3 manage.py runserver_plus --cert-file cert.pem --key-file key.pem 

I do not understand why my app isn't working for the request, although I notice that BEFORE using the cert file I could hit an endpoint from my local machine just fine, and now after it my local machine gets Error: connect ECONNREFUSED 67.205.161.47:8000

I made the key file as such

mkcert -cert-file cert.pem -key-file key.pem octopus-app-8l8j5.ondigitalocean.app octopus-app-8l8j5 ondigitalocean.app 

Why running the server using cert and key files for https not sufficient to make this api request? Thank you

Solution

There is a line in your App.js file in dividends_ui

const base_url = 'http://' + HOST + ':8000'

I have a suspicion this is failing because, when the URL it constructs is called, it is calling an http URL from within an https environment, which is a security risk.

If the HOST domain is always going to be using https, then changing it to

const base_url = 'https://' + HOST + ':8000'

should do the trick. If you're are not sure, then

const base_url = '//' + HOST + ':8000'

can solve the problem as it will use the protocol of the calling page but, obviously, explicitly using https is usually the best method.

Answered By - SamSparx