使用不记名令牌在 JavaScript 中加载图像

我正在 JS 中加载图像，如下所示：

var img = new Image();
img.onload = function () {
..
};
img.src = src;

这可行，但我意识到我必须使用 OAuth 2 （与应用程序的其余部分一样）在服务器端保护我的图像，这只会导致我收到 401 未经授权。

这是一angularapp 和我确实有一个拦截器，因此为服务器的所有角度服务请求添加了授权标头，但在这种情况下，当然 - 不会使用拦截器，因为调用不是在角度上下文中进行的。

关于如何将授权标头添加到获取请求的任何想法？

如果您在服务器端的可能性有限，也可以调用GET XMLHttpRequest请求适当的access_token并设置图像src with a 数据 URI 方案从编码的响应构建base64如下 ：

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();