CORS blocked for wavesurfer only, even if I use a media element

[gelform]

CORS is blocked for wavesurfer only, even if I use a media element, but the same URL works everywhere else.

An mp3 is served from S3 via CloudFront. When I request the mp3 URL in the browser directly, the browser downloads the file.

When I add an <audio> element to my page and use the URL as the source, the mp3 plays.

However when I use the URL in the url param passed to wavesurfer, I get has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I found the thread suggesting using the media param: #3291

I tried both document.createElement('audio') and referencing the media element on the page that does play. I get the same error.

wavesurfer successfully played MP3s from the same S3/CloudFront setup last week. No settings have been changed on AWS.

wavesurfer is served locally so the version has not changed. The current version is 7.7.10.

Finally, I removed all of my custom code and simply added the docs example to my page but got the same error:

        <script>

            const wavesurfer = WaveSurfer.create({
                container: '#waveform',
                waveColor: '#4F4A85',
                progressColor: '#383351',
                url: 'https://files.mydomain.com/my-file.mp3',
            })

            wavesurfer.on('interaction', () => {
                wavesurfer.play()
            })
        </script>

Am I doing something wrong? What am I missing? What else can I try? Thanks!

[katspaugh]

Please check the FAQ section of the readme, it’s covered there.

[gelform]

Sorry, I should've specified that I checked that as well as the other support threads.

I've confirmed that CORS is set correctly. The file works in native <media> elements.

It only doesn't work in wavesurfer. That's why I'm unfortunately seeking guidance.

[katspaugh]

Media element doesn’t need CORS, wavesurfer does. You most likely did not set the headers correctly. Please Google or ask chatgpt how to do it with cloudfront.

[hieunm22]

did you find your solution.? I'm having same issue like you