CODEWITHSUNDEEP
javascriptangularjsangularjs-directivehttps
Simon
Simon

Reputation: 2538

AngularJS templates fail to load over HTTPS

I got my SSL from Cloudflare and they are directly assigning it to my domain as well as automatically redirecting all http to https.

With that being said, I'm struggling to get my angular templates to load over https.

The error message is:

Mixed Content: The page at 'https://mydomain.io/components/index/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://mydomain.io/components/index/header'. This request has been blocked; the content must be served over HTTPS.

It seems somewhat straightforward but I've been trying to fix the issue and I can't...

This is how I'm loading my templates from my directive.js file:

app.directive('navHeader', function() {
    return {
        templateUrl: function() {
            var useHTTPS = window.location.href.indexOf('https') > -1;
            if (useHTTPS) {
                return 'https://mydomain.io/components/index/header.html';
            } else {
                return 'header.html';
            }
        }
    };
}),

but it clearly doesn't work...

Any ideas? Could it be cloudflare's fault?

Upvotes: 0

Views: 479

Answers (1)

Kunvar Singh
Kunvar Singh

Reputation: 1885

This may be the cause of @Cloudflare,

because of you are trying to access the data of https instead of http, but the thing is that server is responding to that protocol or not, so you need to check redirection on server side,

if any request will come from http or https then it will always redirect to https server.

Upvotes: 2

Related Questions