关于图片带token访问，mui 图片访问带token

集市养猫客

于 2019-06-13 15:10:41 发布

阅读量8.9k

点赞数

分类专栏： mui app 图片文章标签： mui app token img

本文链接：https://blog.youkuaiyun.com/qq_41966455/article/details/91864090

版权

mui 同时被 3 个专栏收录

3 篇文章

订阅专栏

app

3 篇文章

订阅专栏

图片

1 篇文章

订阅专栏

本文介绍了一种利用原生Ajax结合Token安全设置，实现跨域图片加载的方法。通过将图片转换为Blob对象，再生成URL并插入DOM元素中，解决了因后台安全策略导致的图片加载问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于后台安全设置，所有接口需要通过传入token的方式访问图片，找了很久的文档想起了原生ajax创建DOM元素的方式，代码如下
原理：通过原生的ajax获取数据，再转数据流图片最后生成的时候转url回去

var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.setRequestHeader("Authorization", "Bearer " + token);//该处加上你当前的token
xmlhttp.onload = function() {
	if (this.status == 200) {
		var blob = this.response;
		var img = document.createElement("img");
		img.onload = function(e) {
			window.URL.revokeObjectURL(img.src);
		};
		img.src = window.URL.createObjectURL(blob);
		document.body.appendChild(img);
		$("#viewItem").empty().append(img);//这个时候img就是一个DOM标签了，把这个标签放到需要的地方就行了
	}
}