Attempting to download a file using jQuery AJAX post request from ReactJs, with an express router middleware layer utilizing the Request API to send requests to a Spring Boot REST API. The flow goes like this: AJAX => Express POST route => Spring Boot API. However, every time the file downloads, its content appears corrupted.
Despite trying various solutions found online, none have seemed to work in resolving the issue.
// jQuery AJAX calling the 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) => {
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)
}
}
}
)
});
// In the Spring Boot REST API
@RequestMapping(value = "/downloadCustomerReport", method = RequestMethod.POST)
public ResponseEntity<byte[]> downloadCustomerReport(@RequestBody SamplesDataRequestHolderVO samplesDataRequestVO){
byte[] resource = null;
try(Workbook workbook = new XSSFWorkbook();
ByteArrayOutputStream out = new ByteArrayOutputStream();){
// Include and populate the 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);
}
The file saved from Spring Boot and Postman downloads correctly without any issues. However, when attempting to download it through React, it consistently shows corruption. The data received in AJAX is shown as:
'PK�[�N[Content_Types].xml�TIn1'.
Comparing the response data from AJAX and Postman reveals no differences. How can this issue be debugged?