XHR response blocked by Chrome, because of mixed content issue (http/https)

9
votes

I'm currently using jQuery AJAX to GET a relative URL, without scheme/domain in front of it (e.g. '/js/get_international_popup/'. The response is also a relative URL when I view my location header before I return it.

When I test this locally, over HTTP, everything works as it should. However, once I test it on my live server, over HTTPS the response is blocked by Chrome, because it says it's insecure:

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

From Chrome's viewpoint, my local test request/response went over HTTP, but my live test request went over HTTPS and got an HTTP response. I am unable to view Chrome's response on the live server, because it is blocked.

If I return a response with an absolute URL (including https://domain) everything seems to work fine, but I prefer not to use absolute URLs.

Does anyone know if there's a way to fix this issue using relative URLs?

2
jqueryajaxgoogle-chromehttpsmixed-content
can you post the code of your ajax call please? – techie_28

2 Answers

1
votes

prepend this using javascript:

var relative_url = '/js/get_international_popup/';
var absolute_url = window.location.origin + relative_url;
$.ajax(absolute_url, function(){});

Ref: http://www.w3schools.com/jsref/prop_loc_origin.asp

Note: Not tested

0
votes

Sometimes it can be caused by a trailing slash. Change https://example.com/js/get_international_popup/ to https://example.com/js/get_international_popup