从服务器下载文件时获取`tar: Error opening archive: Unrecognized archive format`

Question

I have a sample.tar.gz report that's getting generated on my remote system and needs to be downloaded on a button click. I am sending a request via the server and needs to be added to file sample.tar.gz on local system.

On the server side code, I do see binary data in the response

body:"�q'l_�=ks�6���_��^��*q���d��i��bIs9���-H��ṙl����5�_�P4���e�@h��F���}�y���,I�L]/~Bj�,~�USU%E�\r�I�UM�F��R��4C� |��q�\tn[�4���_�^z"�k�u���*�/������G�,��iC믚���%�8Y\t��‚\r���E!YP���U�r/@�d0<[��W=ũ��5t���9�&�X��`cF�5��AJ%[T�I�h�D������L6���[\nC���-5�Fy�9��L��IWy@9hv\+�E%�@N���r�٦��s�5"�P*ğa�����h\̆(��&!Þ!x9a�~�"5���('��>�Iwڂ�g��"�..."

But when the below code runs, I am able to download the file:

export const SystemReport = () => {
  downloadReport = (url) => {
    const options = {
      credentials: 'same-origin',
      responseType: 'arraybuffer',
      method: 'GET',
      headers: {
        'Accept': 'application/gzip; charset=utf-8',
        'Content-Type': 'application/json; charset=utf-8'
      }
    }
    fetch(url, options)
      .then(res => {return res.blob()})
      .then(blob => {
        let url = window.URL.createObjectURL(blob, {type: 'application/zip'})
        let a = document.createElement('a')
        a.href = url
        a.download = 'test.tar.gz'
        a.click()
      }).catch(err => console.error(err))
  }
  const fileUrl = `<System-Path>/api/system-report/download/${<file-name>}`
  return (
    <div className='download-report'>
      <a href='#' onClick={() => downloadReport(fileUrl)} target='_blank' download>
        <Download16 />
      </a>
  </div>
  )
}

But when I try to unzip the file, I get the below error

# tar -xvzf ~/Downloads/sample.tar.gz 
tar: Error opening archive: Unrecognized archive format

Tried looking for some solutions online since I am still learning about these things, but no luck yet. Any help will be appreciated!

Edit : There is a return, but I somehow forgot to add it here. Have edited the code.

Answer 1

You have made a mistake in the following line:

      .then(res => {res.blob()})

The function res => {res.blob()} is equivalent (if we don't take the differences between arrow and regular functions into account) to:

function (res) {
  res.blob();
}

It has no return value, so blob in the next .then block will be equal to undefined .

You need to use the res => res.blob() syntax which is equivalent to the following code:

function (res) {
  return res.blob();
}