共计 3386 个字符，预计需要花费 9 分钟才能阅读完成。
如何给 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://39.106.118.122/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://39.106.118.122/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;
}
}
