문제: img tag 요청이 401 status를 response unauthorized
해결: fetch or axios를 사용해 http request에 Authorization 헤더를 주입해 주어야 한다
why? Authorization: Bearer JWT token 이 필요하다
async fetchWithAuthentication(url, authToken, responseType) {
const res = await axios.get(url, {
responseType,
});
return res;
},
async displayProtectedImageBlob(dom, imageUrl) {
const response = await this.fetchWithAuthentication(
imageUrl,
undefined,
'blob'
);
const objectUrl = URL.createObjectURL(response.data);
const domToMount = document.createElement('img');
domToMount.src = objectUrl;
domToMount.onload = () => URL.revokeObjectUrl(objectUrl);
return domToMount;
}
async displayProtectedImageBase64(dom, imageUrl) {
const response = await this.fetchWithAuthentication(
imageUrl,
undefined,
'arraybuffer'
);
const contentType = response.headers['content-type'];
const domToMount = document.createElement('img');
const binaryData = Buffer.from(response.data, 'binary');
const base64 = binaryData.toString('base64');
const dataUrl = `data:${contentType};base64,${base64}`;
return domToMount;
}