使用承载令牌在JavaScript中加载图像

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

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

这将起作用，但我已经意识到，我必须使用OAuth 2在服务器端保护我的图像，就像应用程序的其余部分一样，这将影响我接收未经授权的401文件

这是一个angular应用程序，我有一个拦截器，为服务器的所有angular服务请求添加授权头，但在这种情况下，当然-拦截器不被使用，因为调用不是在angular上下文中进行的

---

关于如何将授权标头添加到get请求，您有什么想法吗？

只需将承载令牌添加到URL：

var img = new Image();
img.onload = function () {
..
};
img.src = src + '?access_token=mF_9.B5f-4.1JqM';

这至少是OAuth 2规范的内容：

---

尽管这种方法有很多缺点，但作者们忽略了这种性质的问题，这就是它存在的原因。

如果您在服务器端的可能性有限，还可以使用适当的访问令牌调用GET-XMLHttpRequest请求，并使用base64编码的响应的生成设置映像src，如下所示：

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

---

申请书是如何送达的？node.js？IIS？由.NET WebApi 2提供。映像由一个实现为REST GET controller方法的方法返回，该方法将部署在Azure中，所以是的。。IIS.maybe会让你走上正确的道路。谢谢@PrashantPalikhe@PrashantPalikhe，但不幸的是，在这种情况下，它不会帮助我。我正试图通过编程方式将img加载到变量中，我甚至没有一个img元素可以通过编程方式创建，但我认为这不是解决方法。这是一个足够好的解决方案，但需要在服务器上进行工作。我在服务器端更改内容的权限非常有限。这不会破坏任何缓存吗？@axwell当然。。。但是本质上，OAuth的内容无论如何都不应该被缓存。