[JavsScript] XMLHttpRequest

파일 다운로드, 이미지 미리보기 등의 작업을 할 때 헤더에 토큰을 넣어야 하는 작업이 필요하다면 기본적인 URL 만으로는 안되고 XMLHttpRequest() 의 응답결과를 이용해야 한다.

아래 작업은 react에서 사용한 코드이다.

1. window.open

const detector = require('detector');

let uri = '메일 미리보기 주소';
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; //so you can access the response like a normal URL
xhr.onreadystatechange = function () {
    if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        let file = new Blob([xhr.response], {type: xhr.response.type});
        let fileURL = URL.createObjectURL(file);
        window.open(fileURL);
    }
};
xhr.open('GET', uri, true);
xhr.setRequestHeader('Authorization', `Bearer ${토큰)}`);

xhr.send();

2. setState

let uri = '메일 미리보기 주소';
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; //so you can access the response like a normal URL
xhr.onreadystatechange = () => {
    if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        let file = new Blob([xhr.response], {type: xhr.response.type});
        let fileURL = URL.createObjectURL(file);
        this.setState({imgUrl: fileURL});
    }
};
xhr.open('GET', uri, true);
xhr.setRequestHeader('Authorization', `Bearer ${토큰}`);

xhr.send();

3. 다운로드

let uri = '다운로드 주소'`;
let xhr = new XMLHttpRequest();
xhr.open("GET", uri, true);
xhr.responseType = "arraybuffer";
xhr.setRequestHeader("Authorization", `Bearer ${토큰}`;
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {

        let blob = new Blob([xhr.response], {type: xhr.getResponseHeader("Content-Type")});

        // IE
        if (detector.browser.name === "ie") {
            window.navigator.msSaveBlob(blob, "파일명");
        } else {
            let fileUrl = window.URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.setAttribute('style', 'display: none');
            a.setAttribute('href', fileUrl);
            a.setAttribute('download', "파일명");
            a.click();
            window.URL.revokeObjectURL(fileUrl);
        }
    }
};

xhr.send();