Utilizing Angular JS to retrieve an image from the Server using Authorization: Bearer token has been a recent challenge I've encountered. Delving into examples like the one provided at Loading Image in JavaScript with Bearer token.
Incorporating code snippets such as,
var request = new XMLHttpRequest();
request.open('GET','https://dl.content.com/contentfile.jpg', true);
request.setRequestHeader('Authorization', 'Bearer ' + oauthToken.access_token);
request.responseType = 'arraybuffer';
request.onload = function(e) {
var data = new Uint8Array(this.response);
var raw = String.fromCharCode.apply(null, data);
var base64 = btoa(raw);
var src = "data:image;base64," + base64;
document.getElementById("image").src = src;
};
request.send();
The functionality is there, however, it's solely in plain JavaScript. My curiosity lies in whether there exists an equivalent syntax using Angular JS to accomplish the same task.
Attempting to leverage $http of Angular JS, my approach looks like this,
$http({
method: 'GET',
url: file,
headers: {
'Authorization': 'Bearer ' + Constants.token
}
}).then(function (data) {
console.log('from backend', data)
})
An error surfaces and the browser appears to hang, leaving me perplexed on why this occurs and how to rectify it.
Error Screenshot https://i.sstatic.net/2JkMu.png
The quest continues to unravel the mystery behind this error and its resolution.