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

最新推荐文章于 2024-07-27 17:07:11 发布

我来自伯纳乌

最新推荐文章于 2024-07-27 17:07:11 发布

阅读量2w

点赞数 3

分类专栏：前端 javascript 文章标签： javascript img标签

本文链接：https://blog.csdn.net/puyahua/article/details/100757114

版权

当需要在img标签的请求中添加自定义header，如Authorization字段时，由于浏览器限制，不能直接设置。本文探讨了三种解决方案：1) 自定义元素加载，通过authSrc属性替换src并手动下载展示；2) 利用Node做请求转发，适用于Electron客户端；3) 使用Nginx做请求转发，但存在风险和不便。每种方法都有其优缺点和适用场景。

摘要由CSDN通过智能技术生成

如何给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(