express에서 파일 다운로드JS(sendFile) 서버에서 VueJ로, 손상된 파일을 반환하고 있습니까?

express에서 파일 다운로드JS(sendFile) 서버에서 VueJ로, 손상된 파일을 반환하고 있습니까?

expressjs로 작성된 API를 가지고 있어 파일과 함께 제공되면 파일을 전송합니다.아이디

백엔드는 브라우저에 루트 URL을 직접 입력하면 올바른 파일(파손되지 않음)을 전송하기 때문에 정상적으로 동작하고 있습니다.예: http://localhost:8080/local?id=1234 (모든 파일이 정상입니다.txt, xlsx, jpg, zip)

익스프레스 루트는 실제로 res.download를 사용합니다.이것은 send File의 래퍼입니다.

Vue http get 요구에서 이러한 루트 URL을 호출하려고 하면 파손되지 않은txt 파일만 반환됩니다.다른 모든 파일은 다운로드되지만 손상으로 인해 열 수 있습니다.

왜 Vue에서 작동하지 않는지 올바른 방향으로 안내해 주실 수 있습니까?

알기 쉽게 하기 위해 "item"은 이 함수의 인수로 전달됩니다.

        this.$http.get("http://localhost:8000/files/download", {params:{id:item._id}}, {responseType: 'arraybuffer'})
      .then(response => {

        var blob = new Blob([response.data], {type:response.headers.get('content-type')});

        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = item.filename;
        link.click();
      })

참고로 이 길은 급행 노선입니다.

트러블 슈팅을 도와준 @Helpinghand에게 외쳐주세요.

"당신이 올린 링크에서 해결책을 찾았습니다.문제는 "content-type"을 할당하기 전에 해당 개체에서 명시적으로 매개 변수를 전송하고 있었다는 것입니다.게시한 예제에서는 쿼리 매개 변수를 URL에 연결합니다.이 스위치를 켜면 완벽하게 동작합니다.

this.$http.get(`http://localhost:8000/files/download?id=${item._id}`, {responseType: 'arraybuffer'})
      .then(response => {
        console.log(response.headers.get('content-type'));
        console.log(response);

        var blob = new Blob([response.body], {type:response.headers.get('content-type')});

        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = item.filename_version;
        link.click();
      })

언급URL : https://stackoverflow.com/questions/51810331/downloading-files-from-expressjs-sendfile-server-to-vuejs-is-returning-corrup