GET request throws error after app implemented SSL: Mixed Content: This request has been blocked; the content must be served over HTTPS"

Question

Mixed Content: The page at 'https://www.example.com/dashboard' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.example.com/inventory/10/'. This request has been blocked; the content must be served over HTTPS.

We have this Angular web app that runs with Flask on the back-end. Everything was working fine until we implemented SSL. Afterwards, we keep getting this strange error everywhere.

Now, the $http.get request in my dashboard.js is definitely calling "https://api.example.com/inventory/10" in the code below and yet the error is claiming that we are trying to request "http" instead.

$http.get($rootScope.baseUrl+'/inventory/' + item.id)

where rootScope.baseUrl is "https://api.example.com".

It's really weird because some GET requests ARE going through from our web application to our back-end, but some requests are throwing this weird error.

Here's the header that gets an error in our Network tab of the console in chrome.

Request URL:https://api.example.com/inventory/10 Request Headers Provisional headers are shown Accept:application/json, text/plain, / Origin:https://www.example.com Referer:https://www.example.com/dashboard

Answer 1

It was a weird case that came down to removing a forward slash from the end of a URL fixing everything. Somehow, whenever we made a GET request using $http in Angular like baseurl + inventory.id + "/", it would make a http request but as soon as remove that slash, it would make the https request correctly.

Still so confused