Cors issue with hls.js while passing authorization header

Question

I have digital ocean spaces setup with laravel & I am fetching an m3u8 playlist from a standalone vue app like below -

                const audio = document.querySelector("#player");
                this.player = new Plyr(audio, {
                    controls: ["play", "progress", "current-time", "mute", "volume"],
                });
                if (Hls.isSupported()) {
                    const token = localStorage.getItem("auth-token");
                    console.log(token)
                    this.hls = new Hls({
                        debug: true,
                        enableWorker: true,
                        lowLatencyMode: true,
                        backBufferLength: 90,
                        xhrSetup: (xhr) => {
                            xhr.withCredentials = true;
                            xhr.setRequestHeader("Authorization", "Bearer " + token);
                        },
                    });
                    this.hls.loadSource(`${process.env.VUE_APP_API_ENDPOINT}/songs/${this.currentSong.id}/stream`);
                    this.hls.attachMedia(audio);
                    if (this.play) {
                        this.player.play();
                    }
                }

'${process.env.VUE_APP_API_ENDPOINT}/songs/${this.currentSong.id}/stream'

this api returns a m3u8 playlist like below -

#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=176000,CODECS="mp4a.40.2"
https://sgp1.digitaloceanspaces.com/xyzas/streams/oYaviqbquvuFsStUEvJHksH/oYaviqFszwfOAGAuXHksH.m3u8
#EXT-X-ENDLIST

I am getting a cors error like -

Access to XMLHttpRequest at 'https://sgp1.digitaloceanspaces.com/xyzas/streams/oYaviqbquvuFsStUEvJHksH/oYaviqFszwfOAGAuXHksH.m3u8' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

But when I set up my spaces locally using minio its works perfectly.

If I remove the below code then it also works perfectly with digital ocean spaces.

                        xhrSetup: (xhr) => {
                            xhr.withCredentials = true;
                            xhr.setRequestHeader("Authorization", "Bearer " + token);
                        },

But I need to pass the bearer token somehow.