如何给img标签里的请求的添加自定义header
如何给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加载完以后去再下载图片。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Proxy Image</title><script>Object.defineProperty(Image.prototype, 'authsrc', {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);}</script>
</head>
<body>
<img width="100" height="100" id="img" authsrc="http://threex.top/images/image_201909111450326.jpg">
</body>
</html>
这样虽然可以实现功能,但是每次还需要执行额外的脚本,不能在Dom加载完的时候自动去下载展示,不够优雅。能不能自动去下载展示呢
通过自定义元素加载
自定义元素不太了解的可以参考这里Using custom elements,这里还有个w3c的草案autonomous-custom-element。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Proxy Image</title><script>let requestImage = function (url, element) {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) {element.src = URL.createObjectURL(request.response);element.onload = () => {URL.revokeObjectURL(element.src);}}};request.send(null);}class AuthImg extends HTMLImageElement {constructor() {super();this._lastUrl = '';}static get observedAttributes() {return ['authSrc'];}connectedCallback() {let url = this.getAttribute('authSrc');if (url !== this._lastUrl) {this._lastUrl = url;requestImage(url, this);}console.log('connectedCallback() is called.');}}window.customElements.define('auth-img', AuthImg, {extends: 'img'});</script>
</head>
<body>
<img width="100" height="100" is="auth-img"authSrc="http://threex.top/images/image_201909111450326.jpg">
</body>
</html>
利用Node作请求转发
这里我是在Electron客户端用的,是通过进程间通信的方式获取到了用户凭证信息,如果是部署在服务器上的话,应该使用其他方式。
let app = http.createServer((request, response) => {let config = {host: 'xxx.com',method: 'GET',path: request.url,headers: {Authorization: '用户凭证'}};let proxyRequest = http.request(config, proxyResponse => {proxyResponse.on('data', data => {response.write(data, 'image/jpg');});proxyResponse.on('end', () => {response.end();});response.writeHead(proxyResponse.statusCode, proxyResponse.headers);})request.on('data', data => {proxyRequest.write(data, 'image/jpg');})request.on('end', () => {proxyRequest.end();})
});app.listen(port, () => {console.log('has start proxy server!');
})
利用Nginx
既然作请求转发,那Nginx自然也是可以的,但是Nginx里添加header都是固定,没法去修改,想到了一个方式,先请求一个地址携带token,然后自定义一个变量,去设置这个值。这个方式有点恶心,一来是把token暴露了出来,二来是容易造成误伤,一不小心就把token更新了,而且假如Nginx重启了这时候token也没了。只作为一个思路拓展了,是不能这么搞的,大概像下面这样。
server {...set $AUTH_TOKEN "";location /token/([0-9a-z])$ {set $AUTH_TOKEN $1;return 200;}location /image {proxy_pass http://xxx.com;proxy_set_header Authorization $AUTH_TOKEN;}
}
如何给img标签里的请求的添加自定义header相关推荐
- 如何给img标签里的请求添加自定义header
是这样的需求,有一个web页面,里面图片的上传和预览来自于一个独立的文件服务器,对http的请求需要进行访问权限的设置,就是在请求的header里加一个Authorization的字段.上传好说我用的 ...
- img标签请求拦截_如何给img标签里的请求添加自定义header?
是这样的需求,有一个web页面,里面图片的上传和预览来自于一个独立的文件服务器,对http的请求需要进行访问权限的设置,就是在请求的header里加一个Authorization的字段.上传好说我用的 ...
- url获取网站信息不包含网页源文件内的标签_前嗅ForeSpider链接抽取应用场景及链接在源码的html标签里写脚本...
今天,小编给大家带来的教程为:前嗅ForeSpider脚本教程中,链接抽取的应用场景,以及链接在源码的html标签里写脚本的实战教程.具体内容如下: 一.应用场景 当需要手动添加链接时,可添加链接脚本 ...
- 中文字符匹配java_java正则匹配HTML中a标签里的中文字符示例
java正则匹配HTML中a标签里的中文字符示例 发布于 2020-8-12| 复制链接 摘记: 本文实例讲述了java正则匹配HTML中a标签里的中文字符.分享给大家供大家参考,具体如下:今天群里一 ...
- php 去除 html 属性,用PHP 去掉所有html标签里的部分属性
用PHP 去掉所有html标签里的部分属性 http://zhidao.baidu.com/question/418471924.html 用PHP 去掉所有html标签里的部分属性 tppabs s ...
- [react] 为什么标签里的for要写成htmlFor呢?
[react] 为什么标签里的for要写成htmlFor呢? 为了区别和html自身标签中属性 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 ...
- html 中 标签里面的id 和 name 有什么区别?
html 中 标签里面的id 和 name 有什么区别? id与name的作用,作为标签的标识符,基本上是一样的.name是老方法,id是在name基础上发明的,后来才有的. 一般来说,js中使用ID ...
- img标签里的value获取
简单描述:在img标签里的value存放了需要用到的值,但是在js中获取的时候,我直接写的就是$("#imgStr").val(),结果发现是空,后来查了一下,才知道,img的va ...
- Smarty中直接加JS代码和将JS代码写在literal标签里
采用Smarty模板的html怎么加入JS代码呢? 如果按一般平常添加方法,会出错 .因为 Smarty会将"{}"解析为自己的方法,和js中的"{}"会冲突. ...
最新文章
- win7下解决Android SDK Manger慢
- 推荐收藏 | 算法工程师常见面试问题及相关资料汇总
- openwrt linux rootfs 分区表,Openwrt扩展rootfs到U盘
- 敏捷开发框架_他山之石-敏捷开发管理框架在设计项目中的应用
- python报错 TypeError: string indices must be integers
- 原理图元件有波浪线_电气原理图和接线图识图方法,电气接线图怎么画?
- LINUX下的RAID使用
- 如何在ABAP里用函数式编程思想打印出非波拉契Fibonacci(数列)
- PyTorch中使用指定的GPU
- ElasticSearch Pipeline 为新增数据设置更新时间
- Flutter中Widget 、Element、RenderObject角色深入分析
- python两层装饰器_python装饰器
- Oracle 12C 创建用户失败 - ORA-65096 invalid common user or role name
- 使用Thrift让Python为Java提供服务
- 使用UML工具分析类图与类的关系-bouml(java和C++)
- html回车完成修改,后续段落样式 WORD回车后格式自动改变
- 【论文】图文解读经典之作Span-Graph for SRL - 一篇经典的语义角色标注paper
- 【OpenCV】-算子(Sobel、Canny、Laplacian)学习
- 4. Python--Scipy库(上/1-6)
- Axure原型设计说明
热门文章
- java中jgit中checkout_java – JGit branch checkout问题
- 生活中的定律之减法哲学
- 升级每天正常更新欢迎_手机提示“系统升级”,究竟要不要立即更新呢?过来人给你答案!...
- oracle ora 01144,ORA-01144: File size (4194304 blocks) exceeds maximum of 4194303 blocks
- 当你使用计算机时 首先,安全知识竞赛第一环节题库
- 苏州初中生计算机学校有哪些,盘点苏州有哪些优秀寄宿中学
- 在Redhat9.0中安装新ATI显卡
- LWN:浏览器战争硝烟依旧在!
- c语言spawn函数什么作用,c – boost :: asio :: spawn有什么作用?
- html中的sort方法,JavaScript_javascript中sort() 方法使用详解,语法:arrayObject.sort(sortby);参 - phpStudy...