如何给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标签请求拦截_如何给img标签里的请求添加自定义header?
是这样的需求,有一个web页面,里面图片的上传和预览来自于一个独立的文件服务器,对http的请求需要进行访问权限的设置,就是在请求的header里加一个Authorization的字段.上传好说我用的 ...
- 如何给img标签里的请求的添加自定义header
如何给img标签里的请求添加自定义header 是这样的需求,有一个web页面,里面图片的上传和预览来自于一个独立的文件服务器,对http的请求需要进行访问权限的设置,就是在请求的header里加一个 ...
- img标签请求 添加自定义header(一)
需求场景:上传图片后接口返回文件id,展示图片时链接地址为/file/preview?id=xxx.但系统中的接口都需要鉴权(即在请求header中添加authCode),而img标签的请求是浏览器的 ...
- 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 ...
最新文章
- 利用Injection插件加快Xcode编译速度
- for循环递减_讲讲关于循环的那些事
- Python爬虫 教程: re正则表达式解析html页面
- DCMTK:DcmElement :: calcElementLength的测试程序
- leetcode 888. 公平的糖果棒交换(set)
- 前端学习(3138):react-hello-react之组件挂载流程
- github单独下载某个文件或文件夹
- Redis使用单线程却快到飞起的原因
- asp和php功能,asp和php都有什么功能?
- oracle产生随机日期,Oracle生成随机日期时间
- com词根词缀_词根词缀记忆字典(com.ghosun.dict) - 4.8.8 - 应用 - 酷安网
- java exec 关闭,Java学习之使用Runtime.exec()启动、关闭Tomcat
- Nova for mac(强大的代码编辑工具)
- java 清除文本框数据_Java 添加、读取、删除Excel文本框
- 记java的那些编辑器的故事之凌嘉文+李晓彤-结对编程
- 深入理解搜索引擎-排序算法
- 记一次CAD二次开发 (C#) -导出
- Luat Inside | 致敬经典,使用Air724UG制作简易贪吃蛇
- 【转载!!】一个用消息队列 的人,不知道为啥用 MQ,这就有点尴尬
- android跳转到微信小程序