Why is my https:// request cancelled and changed to http://, causing a mixed request error?

Question

I've got some simple lazy-loading javascript:

script.type = 'text/javascript';
script.src = 'https://example.com/'+urlToJavascript;
script.onreadystatechange = callback;
script.onload = callback;   
head.appendChild(script);

SSL is running on my domain, https://example.com/. Despite https being in the script.src I get this mixed content error:

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

I run console.log(script), which shows:

<script type="text/javascript" src="https://example.com/js/lazyScript.js"></script>

Then I head over to Network tab of inspector and find that an initial request for https://example.com/js/lazyScript.js is made but subsequently CANCELLED, followed by a request for the insecure http://example.com/js/lazyScript.js which is then BLOCKED because of mixed content.

I've never come across this before and have no idea why this might be happening.

Any reason why this is happening?

Answer 1

It may be due to some rewrites at server level. I also faced same issue and it was nginx somehow converting a url back to http. Try to load the resource url directly in browser and see if there are redirects happening. If yes go back to the server and fix redirects.