在phonegap应用程序中加载基本身份验证保护图像
提问于 2012-12-17 03:01:25
我有一个phonegap应用程序，它与使用HTTP Basic Auth保护的web api进行通信。api返回带有img标记的html，这些标记引用了同样位于受保护服务器上的图像。不知何故，我需要我的应用程序能够请求和加载这些图像。将基本身份验证凭据注入http://username:password@MySecuredServer.com/...(即src= src )将不起作用。此外，我不控制服务器，所以我不能在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);
});
}所以这里有一个问题:如何将受保护的图像放入我的应用程序中？这是正确的方法吗?如果是，我做错了什么？如果没有，我如何请求这些受保护的映像？任何对一般概念或特定场景的帮助都将是非常好的。提前感谢！
回答 1
Stack Overflow用户
发布于 2012-12-17 20:08:24
最后，我使用NiKo提供的解决方案here将二进制数据转换为base64，并在标题中设置了Auth凭证。
//request image
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.responseType = 'arraybuffer';
xhr.setRequestHeader('Authorization', 'Basic ' + encodedCredentials);
xhr.onload = function(e) {
$("#target").attr('src', 'data:' + type + ';base64,' + base64ArrayBuffer(e.currentTarget.response));
};
xhr.send();其中，base64ArrayBuffer是由NiKo提供的函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13907744
复制相关文章
腾讯云开发者
