javascript - Ajax 获取请求在使用 HTTPS 的 Safari 中不起作用

Question

我想借助 ajax 动态加载一些模板文件。我已经添加了用于加载 html 文件的 ajax $.get 方法，它在除 safari 浏览器之外的所有浏览器上都能正常工作。

在 safari 中，当我第一次打开 url 时，它给我“无法加载资源:已取消” 错误。但是，在我再次刷新页面后，它会加载所有文件。

当我用 http 请求而不是 https 打开我的 url 时，它可以在 safari 浏览器上第一次加载模板文件。

此问题仅在我使用 https 打开 url 时发生。我已经成功安装了证书并且它在其他浏览器上工作正常。即使在 safari 中也没有证书问题。

这是我的代码

var decorator = {
  init: function(book, cd) {
    this.loadTPL(cd);
  },
  tpl: {
    btnStart: "tpl/startBtn.html",
    interfaceTpl: "tpl/interfaceTpl.html",
    topMenu: "tpl/topMenu.html",
    topMenuItem: "tpl/topMenuItem.html",
  },
  loadTPL: function(cbTpl) {
    var self = this;
    var objTpl = {};

    async.forEachOf(this.tpl, function(value, key, callback) {
      $.get(value, {}, function(data) {
        //alert("Load was performed.");
        //console.log(value, data);
        objTpl[key] = data;
        callback();
      });

    }, function(err, results) {
      if (err) {
        console.log(err);
      }
      self.tpl = objTpl;
      cbTpl(err);
    });
  }
}

有什么想法吗？

Answer 1

虽然您的方法“应该”有效，但它进入了 JS 奇怪的未知领域，特别是使用异步库。所以，我的解决方案基本上涉及重构所有这些。相反，您可以使用 jQuery promises 来触发您需要的所有 gets，然后使用 promises 处理程序处理每个 gets 中的响应/错误。

举个例子:

$(templatesToLoad).each(function (element, index) {
  $.ajax({element.url, cache: false })
    .done(function (result) {
        objTpl[key] = result;
        element.allback(); // callback for each template
    })
    .fail(function () {
     alert( "error" );
    })
    .always(function () {
     alert( "completed" );
    });
});

注意:$.get 只是$.ajax 的糖代码。默认情况下，$.ajax 执行 get，除非指定了另一种方法。

无论是哪个浏览器，都会处理这些调用，并且会根据每个浏览器的功能和限制在允许的情况下尽快触发每个调用，因此无需担心具体的实现。

作为一般规则，请始终记住检查调用和响应的编码及其格式、json、文本或您用作响应格式的任何内容。