XHR headers not sent, misspelled headers options in util.fetchFile

[codinbox]

Wavesurfer.js version(s): 4.0.1
Browser and operating system version(s): Firefox, Ubuntu 20.04
Code needed to reproduce the issue:

this.wave = WaveSurfer.create({
    container: '#waveform',
    waveColor: '#3f51b5',
    progressColor: 'blue',
    xhr: {
        [{ key: 'Authorization', value: 'Bearer token' }]
    }
});

No header sent in request. Checked the code and getArrayBuffer function calls util.fetchFile with options containing params.xhr ( containings headers )

    getArrayBuffer(url, callback) {
        let options = Object.assign(
            {
                url: url,
                responseType: 'arraybuffer'
            },
            this.params.xhr
        );
        const request = util.fetchFile(options);
        ...
    }

when checking util.fetchFile i see it looks for options.requestHeaders, instead of options.headers i think.

    // check if headers have to be added
    if (options && options.requestHeaders) {
        // add custom request headers
        options.requestHeaders.forEach(header => {
            fetchHeaders.append(header.key, header.value);
        });
    }

[thijstriemstra]

You should be using the requestHeaders property of the xhr object, not headers.

[flaff]

The request property is a mistake in documentation - by checking typings and source code I came into conclusion it should be requestHeaders instead.

Unfortunately I can confirm requestHeaders are not working either.
It is caused by headers being empty on fetchRequest. When debugging I tried

fetchRequest.headers = fetchOptions.headers;

and it worked like charm 👍

It means that if we are providing a Request object as a first fetch argument it is expected to have headers defined on Request.

[thijstriemstra]

hmm, so it's a bug?

[codinbox]

Not a bug but a doc mistake. as you said the right option to use is xhr: { requestHeaders: {} } and not xhr: { headers: {} }
I changed it in my code and now my keys are sent.

[codinbox]

Maybe a good idea to update the doc to.

[flaff]

If it is working for you I will check other browsers, as it is not working for me on Chrome 86 (Dev).
Edit: it was a mistake on my side as I didn't notice no-cors option. Thanks 👍

[thijstriemstra]

Maybe a good idea to update the doc to.

Where is the doc error visible?

[flaff]

Maybe a good idea to update the doc to.

Where is the doc error visible?

Documentation > Options > xhr

XHR options. For example: let xhr = { cache: 'default', mode: 'cors', method: 'GET', credentials: 'same-origin', redirect: 'follow', referrer: 'client', headers: [ { key: 'Authorization', value: 'my-token' } ]};