问题
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?
回答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.
回答2:
I tried @Kadi's fix of adding a slash, and it worked, but a more elegant solution for me was to change the request from GET to POST, which also fixed the issue.
Still not sure what the root cause was.
来源：https://stackoverflow.com/questions/28197528/mixedcontent-when-im-loading-https-page-through-ajax-but-browser-still-thinks