Angular Img标签自定义请求header Authorization

背景
是这样的需求，有一个web页面，里面图片的上传和预览来自于一个独立的文件服务器，对http的请求需要进行访问权限的设置，就是在请求的header里加一个Authorization的字段。上传好说直接添加一个header就行了，但是预览就比较麻烦了，因为img这个标签图片下载展示是浏览器自己实现的，没有办法去修改。

所以首先想到就是通过接口添加自定义header转发请求或者其他通过接口的方案了，那怎么通过前端页面去实现这个功能？

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

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

示例代码：

<img class="dimg" attr.authsrc="{{item.imgUrl}}">

// 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用
ngAfterViewInit() {this.loadImage();
}
/*** 通过认证加载图片*/
loadImage() {Object.defineProperty(Image.prototype, 'authsrc', {writable: true,enumerable: true,configurable: true})let imgs: any = document.getElementsByClassName('dimg');for (let index = 0; index < imgs.length; index++) {let img = imgs[index];let url = img.getAttribute('authsrc');let request = new XMLHttpRequest();request.responseType = 'blob';request.open('get', url, true);request.setRequestHeader('Authorization', `Bearer ${this.token}`);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);}
}

[参考]：
https://segmentfault.com/a/1190000020366227

Angular Img标签自定义请求header Authorization相关推荐

CORS 请求未能成功_CORS 测试提示错误 Reason: header authorization
在使用 CORS 测试的时候,我们得到下面的错误提示: Cross-Origin Request Blocked: The Same Origin Policy disallows reading t ...
前端cookie 放到请求头_ajax请求携带cookie和自定义请求头header（跨域和同域）
错误: 1.ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须设置withCredential为true. 正确: 1.ajax同域请求下,ajax会自动带上同源的cookie: 2 ...
php自定义请求headers,php通过header发送自定义数据方法
本文将介绍如何通过header发送自定义数据.发送请求时,除了可以使用$_GET/$_POST发送数据,也可以把数据放在header中传输过去. 发送header: 我们定义了三个参数,token.l ...
CORS跨域时axios无法获取服务器自定义的header信息 - 番外篇
已解决CORS跨域时axios无法获取服务器自定义的header信息?! 先看代码: // 登录后的表单提交ajaxRegisterApi: function (form) { var key = l ...
curl post请求 header host_(科普文)curl quot;可quot;得一切
概述前几天在微信群与"知名"技术博客芋道源码的作者芋艿.骚气的再见伐木机以及其他大佬们讨论了一个问题:通过哪些方式可以方便地测试 HTTP API,并且便于向他人分享 TEST ...
drf-yasg 模块细节性说明（自定义请求体，自定义响应体，自定义响应Content-Type, 自定义文档接口标题）
1.模块安装 pip install drf-yasg 2.模块配置 settings.py中写入以下配置: SWAGGER_SETTINGS = {'PERSIST_AUTH': True,'REF ...
拦截器获取请求参数post_「SpringBoot WEB 系列」RestTemplate 之自定义请求头
[WEB 系列]RestTemplate 之自定义请求头上一篇介绍了 RestTemplate 的基本使用姿势,在文末提出了一些扩展的高级使用姿势,本篇将主要集中在如何携带自定义的请求头,如设置 U ...
angluar ajax实例,Angular服务Request异步请求的实例讲解
首先这里我简单写个例子来方便您的理解 var request = { post: function() { var errorCallback = { error: function(f) { thi ...
Ajax设置自定义请求头的两种方法
用自定义请求头token为例方法一 $.ajax({type: "post",url:"http://127.0.0.1:4564/bsky-app/template/ ...

Angular Img标签自定义请求header Authorization

Angular Img标签自定义请求header Authorization

Angular Img标签自定义请求header Authorization相关推荐

最新文章

热门文章