A GET request causes an error after the application is implemented. SSL: mixed content. This request is blocked; content must be served over https "

Question

Mixed content: the https://www.example.com/dashboard 'page was loaded via HTTPS but requested the XMLHttpRequest' http://api.example.com/inventory/10/ 'unsafe endpoint. This request is blocked; content must be transmitted via HTTPS.

We have this Angular web application that works with Flask on an internal server. Everything worked fine until we implemented SSL. Subsequently, we always get this strange error.

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

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

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

This is really strange because some GET requests go through our web application to our back-end, but some requests throw this strange error.

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

Request URL: https://api.example.com/inventory/10 Request Header Displays preliminary Accept headers: application / json, text / plain, / Origin: https://www.example.com Referer: https: / /www.example.com/dashboard

Answer 1

This was a strange case, which came down to removing the slash from the end of the URL fixing everything. One way or another, whenever we made a GET request using $ http in Angular, for example baseurl + inventory.id + "/", it would execute an http request, but as soon as it removed this slash, it would correctly execute the request https.

Still so confused

Answer 2

I think the root of the problem is server redirection. I was able to solve the same problem with setting SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') for Django (its launch behind AWS balancer). Here is the documentation .