img标签请求拦截_如何给img标签里的请求添加自定义header？

是这样的需求，有一个web页面，里面图片的上传和预览来自于一个独立的文件服务器，对http的请求需要进行访问权限的设置，就是在请求的header里加一个Authorization的字段。上传好说我用的Axios直接添加一个header就行了，但是预览就比较麻烦了，因为img这个标签图片下载展示是浏览器自己实现的，没有办法去修改。所以首先想到就是通过接口添加自定义header转发请求或者其他通过接口的方案了，那怎么通过前端页面去实现这个功能，首先声明的是这里用了一些新的API，所以如果是一些比较老的浏览器那就没法这么做了。

问题分析：img标签的src属性只能设置url，不能设置这次请求的header。既然这样，能不能通过别的方式先把图片下载下来然后再给img标签作展示，相当于把src属性的下载和展示分成了两步，先调用接口获取到了数据，然后再把数据给展示出来，也就是src里的值不是一个url地址而是一个数据流。

可以这样，首先通过Object.defineProperty定义一个authSrc属性用来替换src属性的值，然后在window.onload里等dom加载完以后去再下载图片。

Proxy Image

writable : true,

enumerable : true,

configurable : true

})

window.onload = () => {

let img = document.getElementById('img');

let url = img.getAttribute('authsrc');

let request = new XMLHttpRequest();

request.responseType = 'blob';

request.open('get', url, true);

request.setRequestHeader('Authorization', '凭证信息');

request.onreadystatechange = e => {

if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {

img.src = URL.createObjectURL(request.response);

img.onload = () => {

URL.revokeObjectURL(img.src);

}

};

request.send(null);

}

img标签请求拦截_如何给img标签里的请求添加自定义header？相关推荐

请求拦截_实战SpringCloud通用请求字段拦截处理
背景以SpringCloud构建的微服务系统为例,使用前后端分离的架构,每个系统都会提供一些通用的请求参数,例如移动端的系统版本信息.IMEI信息,Web端的IP信息,浏览器版本信息等,这些参数可能 ...
gateway请求拦截_一种网关对用户请求进行统一拦截判断是否放行的方法与流程...
本发明涉及互联网技术领域,特别涉及一种网关对用户请求进行统一拦截判断是否放行的方法. 背景技术: 随着互联网发展的越来越快,技术也更新的非常频繁,比如开发一个系统的架构由最初始的单个服务器就能处理演变 ...
设置公共请求参数_基于分布式锁的防止重复请求解决方案（值得收藏）
关于重复请求,指的是我们服务端接收到很短的时间内的多个相同内容的重复请求.而这样的重复请求如果是幂等的(每次请求的结果都相同,如查询请求),那其实对于我们没有什么影响,但如果是非幂等的(每次请求都会对 ...
corspost请求失败_记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法
今天前后端在联调接口的时候,发生了跨域请求资源获取不到的问题. 首先说明下跨域问题的由来.引自HTTP 访问控制的一段话: 当 Web 资源请求由其它域名或端口提供的资源时,会发起跨域 HTTP 请 ...
java http请求乱码_怎么解决java中的http请求乱码
怎么解决java中的http请求乱码发布时间:2020-06-23 20:00:11 来源:亿速云阅读:90 作者:元一怎么解决java中的http请求乱码?针对这个问题,今天小编总结了这篇文章 ...
5新标签中超链接_一环路新标签——“市井生活圈” 正在更新中......
提起一环路各位小伙伴想到了什么? 是最早建成.成都城市交通网还是居住人口高聚集区? 不过这些标签早就该"更新"啦! 随着景观风貌.街区产业的改造 "市井生活圈&quo ...
分页携带请求参数_一个值得深思的小问题请求中的参数值为空要不要携带该参数？...
最近一个朋友疯狂的和我吐槽公司的后端,说很常规.很普通的一个事儿,也就是验证一下子的事儿,非要搞的那么复杂,治标不治本,技术玩来玩去不但没进步还倒退了. 这是怎么回事呢?咱们就来聊聊这件"小 ...
java中的请求体_在spring mvc test中访问请求体和请求头
我创建了一个spring boot应用程序,这就是我的控制器的样子 . 我使用postman在请求体中发送json,在请求头中发送一个字符串,然后进一步散列json并将其与请求头获取的字符串进行比较 ...
java http请求原理_浅谈Spring Cloud zuul http请求转发原理
spring cloud 网关,依赖于netflix 下的zuul 组件 zuul 的流程是,自定义了ZuulServletFilter和zuulServlet两种方式,让开发者可以去实现,并调用 ...

img标签请求拦截_如何给img标签里的请求添加自定义header？

img标签请求拦截_如何给img标签里的请求添加自定义header？相关推荐

最新文章

热门文章