Normal zip file created on server, corrupted zip file received in client

Question

I have a Vue.js app that is trying to request a zip file from a Flask server. However, when I receive the payload from the server and try to open it, the package I am using ( JSZip ) tells me that the zip file is corrupted. If I request the url through the browser, the zip file downloads with no problems. I think it might be in the way the zip file is generated, but I'm not sure. Why would the file be corrupted on the client-side?

client Javascript code:

const jszip = require('./jszip.min.js');
...more code...

this.filesystem.REST.get('http://localhost:3000').then(function(result){
    var zip = new jszip();
    zip.loadAsync(result.data).then(function(contents) {
         // Execution does not reach this point
         // Fails with corruption error before the then() call
    })

})

server Python code:

@app.route('/')
def home():
    playerFp = os.path.join(seriesMap[seriesid], playerid)
    fileList = os.listdir(playerFp)
    bytesIo = io.BytesIO()
    zf = zipfile.ZipFile(bytesIo, mode="w")
    for file in fileList:
        if '.jpg' in file or '.xml' in file:
            absFp =os.path.join(playerFp, file)
            if '.xml' in file:
                stats = getJsonFormat(absFp)
                jsonfile = file.replace('.xml', '.json')
                zf.writestr(jsonfile, stats)
            else:
                zf.write(absFp, os.path.relpath(absFp, playerFp))
    zf.close()  


    bytesIo.seek(0)

    return send_file(bytesIo,  attachment_filename=playerid+'.zip', as_attachment=False)

This is the error I'm getting in the console:

Answer 1

Your script on the client is faulty. You need to define your zip file with:

var zip = new JSZip()

as opposed to:

var zip = new jszip()