当前位置： 首页 > news >正文

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

news 2025/9/19 2:41:09

        是这样的需求，有一个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

是这样的需求&#xff0c;有一个web页面&#xff0c;里面图片的上传和预览来自于一个独立的文件服务器&#xff0c;对http的请求需要进行访问权限的设置&#xff0c;就是在请求的header里加一个Authorization的字段。上传好说我用的Axios直接添加一个header就行了&#xff0c;但…...

编程日记 2023/5/29 19:11:35

Linux系统基本概念操作，用户和文件权限管理

常用快捷键和通配符常用快捷键按键作用Ctrld键盘输入结束或退出终端Ctrls暂停当前程序&#xff0c;暂停后按下任意键恢复运行Ctrlz将当前程序放到后台运行&#xff0c;恢复到前台为命令fgCtrla将光标移至输入行头&#xff0c;相当于Home键Ctrle将光标移至输入行末&#xff0c;相…...

编程日记 2023/5/31 14:05:27

数据库中的单表查询和多表查询

一、单表查询素材&#xff1a; 表名&#xff1a;worker-- 表中字段均为中文&#xff0c;比如 部门号 工资 职工号 参加工作 等 CREATE TABLE worker (部门号 int(11) NOT NULL,职工号 int(11) NOT NULL,工作时间 date NOT NULL,工资 float(8,2) NOT NULL,政治面貌 varchar(10) …...

编程日记 2023/5/2 2:39:55

全网详解MyBatis-Plus LambdaQueryWrapper的使用说明以及LambdaQueryWrapper和QueryWapper的区别

文章目录1. 文章引言2. 代码演示3. 分析LambdaQueryWrapper3.1 引入LambdaQueryWrapper的原因3.2 LambdaQueryWrapper和QueryWapper的区别4. 重要总结1. 文章引言 今天在公司写代码时&#xff0c;发现同事使用LambdaQueryWrapper来查询数据&#xff0c;而我一直习惯使用QueryW…...

编程日记 2023/5/31 16:42:04

暴力破解（new）

数据来源 本文仅用于信息安全的学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若观众因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与本人无关。 01 暴力破解介绍及应用场景 》暴力破解介绍 》暴力破解字典 GitHub - k8gege/Passwor…...

编程日记 2023/5/10 1:14:47

Android12之apex调试

1.问题在调试libtinyalsa.so中添加log后&#xff0c;但是发现push so后&#xff0c;却没有log打印&#xff0c;why&#xff1f;2.分析以下为libtinyalsa.so的位置/system/lib64/libtinyalsa.so /system/lib/libtinyalsa.so /apex/com.android.vndk.v31/lib64/libtinyalsa.so /a…...

编程日记 2023/5/6 23:58:04

Python - 数字（Number）数据类型常用操作

目录数字运算类型转换数学函数数学库math、cmathmath 模块常量math 模块方法随机函数库 randomrandom 模块方法保留小数到指定位数三角函数数字运算 &#xff1a;用于给变量赋值type(x)&#xff1a;查看数据所属类型isinstance(x, A_tuple)&#xff1a;判断数据是否为预期类型…...

编程日记 2023/5/28 5:18:17

QT(51)-动态链接库-windows

1.qt- 调用win32 DLL 2.qt- 调用MFC DLL 0概述&#xff1a; 01.扩展DLL&#xff1a; 必须有一个DllMain()函数&#xff0c;且调用AfxInitExtensionModule()函数。 CRuntimeClass类-初始化函数CDynLinkLibrary。02.windows定位DLL文件&#xff1a; 1&#xff09…...

编程日记 2023/4/14 9:47:11

[Vivado那些事儿]将自定义 IP （HDL）添加到 Vivado 模块设计（Block Design）

绪论使用Vivado Block Design设计解决了项目继承性问题&#xff0c;但是还有个问题&#xff0c;不知道大家有没有遇到&#xff0c;就是新设计的自定义 RTL 文件无法快速的添加到Block Design中&#xff0c;一种方式是通过自定义IP&#xff0c;但是一旦设计的文件有问题就需要重…...

编程日记 2023/5/4 21:19:12

开学必备数码清单，大学生开学必备数码好物分享

还有很多小伙伴不知道开学应该准备什么&#xff0c;在学校当中需要用到的数码产品&#xff0c;在宿舍娱乐使用的音箱、学习当中使用到的笔记本&#xff0c;这些都是我们可以准备的&#xff0c;还有一个小众的好物&#xff0c;能够让我们在学校当中提升生活的幸福感&#xff0c;…...

编程日记 2023/5/20 20:51:40

【面试题】常见前端基础面试题（HTML,CSS,JS）

大厂面试题分享 面试题库后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面试题库html语义化的理解代码结构: 使页面在没有css的情况下,也能够呈现出好的内容结构有利于SEO: 爬虫根据标签来分配关键字的权重,因此可以和搜索引擎…...

编程日记 2023/5/31 9:11:11

Vue (4)

文章目录1. 绑定样式1.1 绑定 class 样式1.2 绑定 style 样式2. 条件渲染2.1 v-show2.2 v-if3. 列表渲染3.1 v-for3.2 key 的作用与原理3.3 列表过滤3.4 列表排序1. 绑定样式 说 绑定样式 前&#xff0c;先准备好 以下几个 样式 : <style>.basic {width: 400px;height: 1…...

编程日记 2023/5/29 12:34:59

静态库和动态库的制作

一、什么叫做库&#xff1a; 库&#xff1a;二进制的程序&#xff0c;能被操作系统载入内存中执行 二、Linux下的库有两种&#xff1a;静态库和共享库(动态库)&#xff0c;二者的不同点在于代码载入的时刻不同。 A、静态库在程序编译的时候并会被连接到目标代码中&#xff0c;程…...

编程日记 2023/5/16 11:27:50

Oracle实现高可用性的工具（负载均衡/故障切换）

Oracle实现高可用性的工具&#xff08;负载均衡/故障切换&#xff09;1 Oracle RAC故障转移负载均衡2 Data Guard负载均衡-读写分离Data Guard Broker3 GDSGSM&#xff1a;连接管理工具主要功能Data Guard Broker功能是监控Data Guard状态&#xff0c;当主库异常时自动切换角色…...

编程日记 2023/5/28 19:21:03

图解经典电路之OCL差分功放-三极管分立器件电路分析

下面从简到繁，从框架到细节的顺序讲解电路。即先讲框架，然后逐渐添加电路细节，所以大家跟上思路。 1、第一步，尽可能的抽象这个电路，等效如下： 图二 OCL等效电路 整个OCL电路，可以等效为一个大功率的运放，加上几个电阻电容构成了一个同向放大器，就是这么简单。 为了便…...

编程日记 2023/5/27 21:19:14

thymeleaf模板注入学习与研究--查找与防御

一、日常编码中常见的两种漏洞场景 1.1 模板参数外部可控 RequestMapping("/path")public String path(RequestParam String lang) {return lang ;}实际开发过程中 依靠我丰富的想象力只能想出 换主题 这种场景下可能会出现 大佬们自行脑补吧。 1.2 使用GetMappin…...

编程日记 2023/4/23 10:32:11

第七章：Linux最小化搭建环境解说2

配置IP地址&#xff1a;我们先要到网卡配置文件夹里&#xff0c;路径是/etc/sysconfig/network-scripts/&#xff0c;有点长&#xff0c;不过没事&#xff0c;我们要学会习惯&#xff0c;这还是经常用的。然后就是用ls命令查看下面有什么&#xff0c;只有一个文件ifcfg-ens160&…...

编程日记 2023/5/25 19:50:59

两道链表经典算法题---链表有无环(基础+进阶)

生活就像一盒巧克力&#xff0c;你永远不知道你会得到什么。——《阿甘正传》目前自己粗略的学完数据结构&#xff0c;正在开始刷算法题目。个人觉得算法是一个积累&#xff0c;循序渐进的的过程&#xff0c;需要不断加量&#xff0c;进而达到所谓的质。链表作为数据结构一个重…...

编程日记 2023/5/9 11:35:21

2023/1/14总结

今天学习的是c语法知识。 容器arry&#xff1a; 通俗来说这个容器就i是c语言的数组&#xff0c;和C中vevtor不同&#xff0c;arry是定长度的&#xff0c;而vector是动态数组。头文件为&#xff1a;<arry> 初始化&#xff1a; arry<数据类型&#xff0c;你所要声明…...

编程日记 2023/5/20 0:00:27

Python 之 NumPy 统计函数、数据类型和文件操作

文章目录一、统计函数1. 求平均值 mean()2. 中位数 np.median3. 标准差 ndarray.std4. 方差 ndarray.var()5. 最大值 ndarray.max()6. 最小值 ndarray.min()7. 求和 ndarray.sum()8. 加权平均值 numpy.average()二、数据类型1. 数据存储2. 定义结构化数据3. 结构化数据操作三、…...

编程日记 2023/5/8 22:16:20

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/9/19 1:35:28

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/9/13 17:48:18

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/9/13 17:43:21

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/10 13:55:45

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/8/22 5:05:39

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/9/12 23:21:56

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/9/7 8:50:46

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/9/13 4:12:41

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

编程新知 2025/9/11 7:18:01

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

编程新知 2025/7/26 16:00:36