小编Unc*_*ace的帖子

我有一个 phonegap 应用程序，它与使用 HTTP 基本身份验证保护的 web api 进行通信。api 返回带有 img 标签的 html，这些标签引用了也在安全服务器上的图像。不知何故，我需要我的应用程序能够请求和加载这些图像。将基本身份验证凭据注入 src（即 src=http://username:password@MySecuredServer.com/...）将不起作用。此外，我不控制服务器，因此无法以 base64 格式发送图像。

我目前的做法是使用 $.ajax 请求图像，设置 Authorization 标头，然后将图像从缓存加载到 DOM（因为图像是通过 ajax 调用缓存的）。理想情况下，我应该能够使用 $.ajax 请求每个图像一次，然后将图像从缓存加载到页面上。如果页面重新加载（因为图像已经缓存），但不会在第一次发出请求时加载图像（即使我正在等待请求完成），这种方法也有效。请注意，我的 phonegap 应用程序只有一个页面（从 html DOM 的角度来看），在该页面上动态加载和卸载内容，因此主页面永远不会重新加载。这是我目前正在尝试的：

$.ajax({
       url: 'http://MySecuredServer.com/images/example.png',
       beforeSend: function(req){
           req.setHeader('Authorization', 'Basic ' + base64UserCredentials);
       },
       cache: true,
       complete: function(){
            var img = document.createElement('img');
            img.src = 'http://MySecuredServer.com/images/example.png';
            $('#target').append(img);
       }
       });

我也尝试过类似的事情

complete: function(){
    var img = new Image();
    img.src = http://.....
    $(img).on('load', function(){
          $('#target').append(img);
    });
}

那么问题来了：如何将受保护的图像放入我的应用程序中？这是正确的方法吗，如果是，我做错了什么？如果没有，那么我如何请求这些受保护的图像？对一般概念或特定场景的任何帮助都会非常好。提前致谢！