Question

我在JS中加载一个像这样的图像：

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

这会有效，但我已经意识到我必须使用OAuth 2在服务器端保护我的图像（与应用程序的其余部分一样），这将在我看来只是收到401 Unauthorized。

这是一个 angular 应用程序，我确实有一个拦截器，因此为服务器的所有角度服务请求添加了Authorization标头，但在这种情况下当然 - 不使用拦截器，因为呼叫不是在角度背景下进行的。

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

Answer 1

如果您在服务器端的可能性有限，也可以使用相应的GET调用XMLHttpRequest access_token请求，并将图片src设置为{ {3}}使用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();

Answer 2

只需将持有人令牌添加到网址：

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

那，至少是OAuth 2规范的内容： https://tools.ietf.org/html/rfc6750#section-2.3

尽管这种方法有许多缺点，但作者还是对这种性质的问题进行了抛弃，这就是为什么它存在的原因。

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

2 个答案: