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

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

news 2025/7/4 19:25:04

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/6/21 16:43:12

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2025/7/4 12:08:22

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/7/4 16:54:47

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/6/27 1:45:53

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/6/18 3:43:34

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/6/27 6:46:09

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/7/4 12:36:15

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/6/21 15:51:18

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/7/2 16:01:30