MixedContent when I'm loading https page through ajax, but browser still thinks it's http

Question

After Installing SSL Cert on a web page, I had the problem where the page served with https would require http endpoint with ajax. I'm using restangular, and I changed the base url to have https.

    var uri = location.protocol + "//" + location.host;
    RestangularProvider.setBaseUrl(uri);

The interesting part is that, when I see the request in the chrome developer tools i see

Request URL:https://theaddress.com/api/endpoint
Request Headers
Provisional headers are shown
Accept:application/json, text/plain, */*
Referer:https://theadress.com/somepage
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36
X-Requested-With:XMLHttpRequest

So the request should be an https one, yet I still get:

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

Also I should mention, this happens on prod server, but on my local test it works fine ( I have self signed ssl cert ) after I have made it use base url that includes https.

What could be the problem?

Answer 1

I just spent a good 4 hours trying to fix a similar problem. Here's what solved mine:

Summary: add a trailing '/' to your request

I found this post useful in fixing my problem. Basically, the server doesn't care if you send your request with a trailing '/' or not, because it internally routes to '/' if you don't add it. However, if the routing is happening internally (e.g. nginx passing the request to a local process), you get an http redirect which will make your request fail.