从nodejs服务器下载文件在客户端下载为损坏的文件

Question

On the client side it is a react app. I set up an endpoint that I can request the file from. However every file from pdfs, to pngs, to excel files all seem to be corrupted upon trying to download from the server, can't successfully open any of these files. Was wondering if anyone had any insight about it. Haven't been able to find anything that works.

See below for the code for both the backend and front end.

Backend node.js

ChangeLogAttachment_read(req, res, id, file_path, file_type)
                    .then(resp => {
                        res.download(file_path, file_name, (error)=>{
                            if(error) {
                                console.log("Error", error);
                            }
                        });

                        // Tried these
                        // res.contentType(file_type);
                        // res.send(fs.readFileSync(file_path));
                        // res.send(resp)
                    })

                    .catch(err => {

                        err.location = 'Error in NS_Controller.changeLogAttachments read.';
                        log.error(err)
                    });

Front end - react

requestFile = (id, filePath, fileName , fileType)=> {
    let token = AuthUtils.getToken();

    let data = {};
    data['action'] = 'read';
    data['id'] = id;
    data['file_path'] = filePath;
    data['file_type'] = fileType;
    data['file_name'] = fileName;

    axios({
      url:  process.env.REACT_APP_HOST +
        process.env.REACT_APP_PORT + '/pbx/changelog/attachments',
      method: 'POST',
      headers: {
        Authorization: 'Bearer ' + token,
        responseType:'blob'
      },
      timeout: 10000,
      data
    }).then(response=> {
      console.log("Response", response);

      const url = window.URL.createObjectURL(new Blob([response.data]));
      // const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', fileName); //or any other extension
      document.body.appendChild(link);
      link.click();

    }).catch(error=> {
      console.log("Error", error);
      
    })

  }

Answer 1

You should change response type in axios headers object to "arraybuffer"

headers: {
        Authorization: 'Bearer ' + token,
        responseType:'arraybuffer'
      },

Source: https://github.com/axios/axios/issues/448#issue-176993853

Answer 2

Actually was able to solve it cause the response type blob had to be outside of the headers like below:

{
      url:  process.env.REACT_APP_HOST +
        process.env.REACT_APP_PORT + '/pbx/changelog/attachments',
      method: 'POST',
      responseType:'blob',
      headers: {
        Authorization: 'Bearer ' + token
      },
      timeout: 10000,
      data
    }