img标签请求添加自定义header（一）

需求场景：上传图片后接口返回文件id，展示图片时链接地址为/file/preview?id=xxx。但系统中的接口都需要鉴权（即在请求header中添加authCode），而img标签的请求是浏览器的默认行为，并不受我们的接口拦截（如axios请求拦截）约束。

通常的解决方式：

手动发请求+处理流

以Vue为例，我们可以封装一个自定义图片组件authImg

<template><img ref="img">
</template>
<script>
export default {props:{src:{type: String,default:''}},watch:{src:{handler(n){if(n){this.getImage(n);}},immediate:true}},methods:{getImage(url){let that = this;that.$nextTick(()=>{let request = new XMLHttpRequest();request.responseType = 'blob';request.open('get', url, true);// 添加自定义请求头request.setRequestHeader('authToken', localStorage.getItem('authToken')); request.onreadystatechange = e => {if (request.readyState == XMLHttpRequest.DONE && request.status == 200) { that.$refs.img.src = URL.createObjectURL(request.response);that.$refs.img.onload = () => {that.$refs.img && URL.revokeObjectURL(that.$refs.img.src);} }};request.send(null);});}}
}
</script>

使用：

<template><authImg src="/file/preview?id=xxx"></authImg>
</template>

此方式可以处理绝大多数场景，但解决不了类似富文本中的img问题。一般富文本会保存成字符串，数据回显时，很难处理其中的img标签

通过自定义元素加载

这种方式就是扩展原有的HTML Element，实现一些自定义的功能，示例如下

// 扩展原生Image
let requestImage = function (url, element) {let request = new XMLHttpRequest();request.responseType = 'blob';request.open('get', url, true);request.setRequestHeader('authToken', localStorage.getItem('authToken')); request.onreadystatechange = e => {if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {element.src = URL.createObjectURL(request.response);element.onload = () => {element && 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'});

使用：

原始(报错401)：<img src="/file/preview?id=xxx">
替换后：<img is="auth-img" authsrc="/file/preview?id=xxx"/>

此方式可以解决上述的富文本中的图片问题，以wangEdit为例

// 自定义上传图片
this.editor.customConfig.uploadImgHooks = {customInsert: function (insertImg, result, editor) {let imgUrl = result.data[0];that.editor.cmd.do('insertHTML', `<img is="auth-img" authsrc="${imgUrl}" alt="图片" /> `);}
}

serviceWorker

我们真的没办法拦截到浏览器原生的img请求吗？其实是可以的。serviceWorker具体使用可自行查找资料，这里我们简单做个示例：

<!--index.html-->
<script>
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('./sw.js');
}
</script>

//sw.js
self.addEventListener('fetch', function (evt) {// 拦截指定请求前缀if (evt.request.url.indexOf('image/view?id')>-1) {// 拷贝原始请求const request = evt.request.clone();// 创建headersconst headers = new Headers();// 添加自定义请求头headers.append('authToken', '7c5c90e6-bf49-47c0-bda1-bc93255364d8'); // 创建新请求const newRequest = new Request(request,{headers,mode: 'cors'})// 返回=>走浏览器原有逻辑evt.respondWith(fetch(newRequest))}
});

这样我们就不需要修改img标签，或者做其它处理。通过serviceWorker自动拦截对应请求，添加请求头，剩下的交给浏览器就可以了。

后记

第一、二种方式原则上差不多，第二种覆盖场景会多一些，但改动量都比较大。

第三种方式改动较小，基本上是全场景覆盖，如富文本，如css背景图设置成接口地址；但自定义性较差，比如异常回调，加loading之类的操作。

当然使用serviceWorker，同样可以对以window.open或者window.location.href形式的下载链接拦截，添加自定义请求头，就不需要前端通过调用接口获取文件流再手动转换了。