javascript - AngularJS 模板无法通过 HTTPS 加载

Question

我从 Cloudflare 获得了 SSL，他们直接将其分配给我的域，并自动将所有 http 重定向到 https。

话虽如此，我正在努力让我的 Angular 模板通过 https 加载。

错误信息是:

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.

这看起来有点简单，但我一直在尝试解决这个问题，但我无法...

这就是我从指令.js 文件加载模板的方式:

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';
            }
        }
    };
}),

但它显然不起作用......

有什么想法吗？难道是cloudflare的错吗？

Answer 1

这可能是@Cloudflare的原因，

因为您正在尝试访问https而不是http的数据，但问题是服务器是否响应该协议(protocol)，因此您需要检查服务器端的重定向，

如果任何请求来自 http 或 https，那么它将始终重定向到 https 服务器。