我正在像这样在 JS 中加载图像:
var img = new Image();
img.onload = function () {
..
};
img.src = src;
这会起作用,但我意识到我必须使用 OAuth 2 在服务器端保护我的图像(与应用程序的其余部分一样),这将影响我收到 401 未经授权。
这是一个 angular 应用程序,我确实有一个拦截器为所有对服务器的 angular 服务请求添加 Authorization header ,但当然在这种情况下 - 拦截器没有被使用,因为调用不是在 Angular 上下文中进行的。
关于如何将 Authorization header 添加到 get 请求有什么想法吗?
最佳答案
如果您在服务器端的可能性有限,也可以使用适当的 access_token
调用 GET
XMLHttpRequest
请求并设置带有 data URI scheme 的图像 src
从使用 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();
关于javascript - 使用不记名 token 在 JavaScript 中加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35079576/