title: Excel file corrupted when downloaded using ReactJs jQuery ajax post request
body: <p>I am trying to download a file using jQuery ajax post request from ReactJs. And I have middle layer of express router which is using Request api to send request to Spring Boot rest api. ajax => express post route => Spring Boot api. The file is downloading but content is corrupted all the time. </p>
  
  <p>I have tried all the solutions provided over internet but none works for me.</p>
  
  <pre><code>// ajax calling express post route
  $.ajax({
              url: "/downloadReport",
              contentType: 'application/json',
              data:JSON.stringify({"data1":"value1"}),
              type:'POST',
              cache: true,
              responseType: 'arraybuffer',
              success: function(response) {
                  console.log(response);
                  var fileName=response.headers['content-disposition'].split('filename=')[1];
                  var blob = new Blob([response.data], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
                  const blobURL = window.URL.createObjectURL(blob);
                  const tempLink = document.createElement('a');
                  tempLink.style.display = 'none';
                  tempLink.href = blobURL;
                  tempLink.setAttribute('download', fileName);
                  tempLink.click();
  
              }.bind(this),
              error: function(xhr, status, err) {
                  console.log(err)
                  console.log(status)
                  console.log(xhr)
              }.bind(this)
          })
  
  // express route.
  router.post("/downloadReport", (req, response, next) =&gt; {
      request(
          {
              url: '/springbootapi/downloadCustomerReport',
              method: "POST",
              body: JSON.stringify(req.body),
              headers: {
                  'Content-Type':'application/json'
              },
          }, function (error, res, body) {
              if(error){
                  console.log(error);
                  response.status(500).send(error);
              }else{
                  try {
                      response.send({headers: res.headers, data: res.body})
                  }catch(err){
                      response.status(500).send(err)
                  }
              }
          }
      )
  });
  </code></pre>
  
  <pre class="lang-java prettyprint-override"><code>// in springboot rest api
  @RequestMapping(value = "/downloadCustomerReport", method = RequestMethod.POST)
      public ResponseEntity&lt;byte[]&gt; downloadCustomerReport(@RequestBody SamplesDataRequestHolderVO samplesDataRequestVO){
  byte[] resource = null;
  try(Workbook workbook = new XSSFWorkbook();
                  ByteArrayOutputStream out = new ByteArrayOutputStream();){
  // I have create and attached worksheet
  workbook.write(out);
  writeToFile(new ByteArrayInputStream(out.toByteArray()));
  resource = out.toByteArray();
  }
  
  
  HttpHeaders headers = new HttpHeaders(); 
         headers.setContentType(MediaType.valueOf("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"));
          headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=CR Final.xlsx");
  
          return ResponseEntity.ok()
                  .headers(headers)
                  .body(resource);
  
  
  }
  
  </code></pre>
  
  <p>I saved the file from Spring Boot and it is okay. And I tried from Postman and download the response. It is also good and there is no problem in the file. But when I tried from react, it is always corrupted. I am getting data in ajax as </p>
  
  <p>'PK�[�N[Content_Types].xml�TIn1'. </p>
  
  <p>I have compared the response data in ajax and Postman and they are same. How can I debug it?</p>