MixedContent when I load an https page via ajax, but the browser still considers it http

Question

After installing SSL Cert on a web page, I had a problem when a page served with https would require an http endpoint with ajax. I use restangular and I changed the base url to https.

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

The interesting part is that when I see a 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 https one, but 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. 

I should also mention that this happens on the prod server, but it works fine in my local test (I have my own ssl cert subscriber) after I used it for a base url that includes https.

What could be the problem?

Answer 1

I spent 4 hours fixing a similar problem. Here's what mine decided:

Summary: add a trailing '/' to your request

I found this post useful to fix my problem. Basically, the server doesn’t care if you send your request with the final "/" or not, because it is internally routed to "/" if you did not add it. However, if routing occurs domestically (for example, nginx passes the request to the local process), you get an http redirect, which will cause your request to fail.

Answer 2

I tried fixing @Kadi to add a slash, and it worked, but a more elegant solution for me was changing the request from GET to POST, which also fixed the problem.

Still not sure what the main reason was.