[JS] Resource interpreted as Document but transferred with MIME type application/zip 경고, 파일 다운로드 오류

 

안녕하세요 오늘은 크롬창에 경고문구(Resource interpreted as Document but transferred with MIME type application/zip )에 대해서 포스팅을 하겠습니다~! 최근에 파일 업/다운로드관련 작업을 진행하였는데 오류까지는 아니였지만 크롬 브라우저에 경고문구가 뜬걸 보고 말았습니다. 경고문구를 번역해보자면

"Resource interpreted as Document but transferred with MIME type application/zip"

↓

"문서로 해석되지만 MIME 유형 application / zip으로 전송 된 리소스"

 

경고문구

 

[해결 방법1]

<a>태그에 download 추가

<a href="http://example.com/archive.zip" download>Export</a>

---

 

[해결 방법2]

_blank 를 사용해서 새창을 열어서 다운로드하기

많은 사이트에서 이 방법을 사용하고 있는것같다.

window.open(href, '_blank');

---

 

[해결 방법3]

 

하지만 나는 애초에 a태그를 사용해서 다운로드한게 아니라

 location.href= seq+"/single";

위와 같은 형태로 작업을 진행했었기때문에 다른 방법을 몰색해보았다. 

 

 

 

 

 

하단 코드도 역시나 a태그를 만들어서 blank사용해서 새창으로 다운받는거지만 사용자 눈에는 안보임~

아래 코드는 '파일 업/다운로드' 포스팅에서 세세하게 다루도록하겠다. 

function downloadFile(urlToSend,file_showname) {
     var req = new XMLHttpRequest();
     req.open("GET", urlToSend, true);
     req.responseType = "blob";
     req.onload = function (event) {
         var blob = req.response;
         var fileName =file_showname; 
         var link=document.createElement('a');
         link.target = '_blank';
         link.href=window.URL.createObjectURL(blob);
         link.download=fileName;
         link.click();
     };

     req.send();
 	}

 

 

호출

downloadFile( seq+'/single', file_showname); // 일반 확장자

downloadFile( key+'/zipFileDown', showname+'.zip'); //zip파일

 

대강 설명하자면 나같은 경우, downloadFile의 첫번째 인자는 서버로 보낼 url을 넣어주고,

downloadFile의 두번째 인자인 file_showname은 다운로드시 보여주고자하는 이름을 넣어준다.

 

file_showname = test.xlsx

예를들어 file_showname이 .zip으로 끝나면 zip파일로 다운이되고, png파일로 끝나면 png 파일로 끝난다. 상황에 맞게 잘 처리해주면 된다. 단일 형식으로만 다운되는 경우라면 굳이 두번째 인자는 없어도 될듯.

 

오늘은 Resource interpreted as Document but transferred with MIME type application/zip 경고, 파일 다운로드 오류문구 제거 방법에 대해서 알아봤습니다. 그럼이만 다음 포스팅에서.

 

 

 

 

2021.05.13 - [분류 전체보기] - [java] ajax이용해서 파일 업로드/다운로드, file upload