Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CORS - audio in development and xhr option #3510

Closed
CalvinJamesHeath opened this issue Jan 23, 2024 · 7 comments
Closed

CORS - audio in development and xhr option #3510

CalvinJamesHeath opened this issue Jan 23, 2024 · 7 comments
Labels

Comments

@CalvinJamesHeath
Copy link

Bug description

In development, Wavesurfer is unusable because of CORS problems.

The documentation also makes no mention of using an XHR object to fix this issue.

Environment

  • Browser: Chrome

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

@CalvinJamesHeath
Copy link
Author

WaveSurfer.create({ container: #${id}, responsive: true, url: fileUrl, xhr: { cache: 'default', mode: 'cors', method: 'GET', credentials: 'include', headers: [ { key: 'cache-control', value: 'no-cache' }, { key: 'pragma', value: 'no-cache' }, ], requestHeaders: [ { key: 'Authorization', value: localStorage.getItem('token'), }, ], }, })

I also tried const myAudio = new Audio( your url to mp3 ); myAudio.crossOrigin = 'anonymous'; wavesurfer.load(myAudio, peaks); from

#2014

@katspaugh
Copy link
Owner

Wavesurfer uses fetch to download the audio for rendering, so either CORS must be enabled on the server, or the audio file must be on the same domain as the HTML.

Please learn more about CORS here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

@katspaugh katspaugh closed this as not planned Won't fix, can't repro, duplicate, stale Jan 23, 2024
@CalvinJamesHeath
Copy link
Author

Cors is enabled on the server, the response headers don't contain Access-Control-Allow-Origin:
https://mysite.com

. Still no solution even after I added:

WaveSurfer.create({ container: #${postId}, responsive: true, url: fileUrl, waveColor: '#D8D8D8', progressColor: '#ED2784', barRadius: 3, cursorColor: 'transparent', xhr: { cache: 'default', mode: 'cors', method: 'GET', credentials: 'include', redirect: 'follow', referrer: 'client', headers: [ { key: 'Authorization', value: localStorage.getItem('token'), }, ], }})

How can we tweak the headers?

@katspaugh
Copy link
Owner

The xhr option is now called fetchParams

@johnbonds
Copy link

johnbonds commented Aug 17, 2024

My audio files are hosted on S3 behind CloudFront with CORS enabled. I am using CloudFront cookies to download my files. When I specify the following parameters in wavesurfer, it appear to execute an endless loop of attempting to load the file

    url: typeof audioData === "string" ? audioData : undefined,
     fetchParams: {
       method: "GET",
       credentials: "include",
     },

image

Anyone else seeing this issue?

To get around this for now I am simply fetching the file manually and calling wavesurfer?.loadBlob(blob).

@thomaskanzig
Copy link

@johnbonds In S3 you can configure CORS for each bucket:

  1. Open the Amazon S3 console.
  2. Choose the bucket you want to configure.
  3. Choose the Permissions tab.
  4. Scroll down to the Cross-origin resource sharing (CORS) section.
  5. Choose Edit.
  6. Add a CORS configuration similar to the following:
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-meta-custom-header"
        ]
    }
]

Happy coding!

@johnbonds
Copy link

@johnbonds In S3 you can configure CORS for each bucket:

  1. Open the Amazon S3 console.
  2. Choose the bucket you want to configure.
  3. Choose the Permissions tab.
  4. Scroll down to the Cross-origin resource sharing (CORS) section.
  5. Choose Edit.
  6. Add a CORS configuration similar to the following:
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-meta-custom-header"
        ]
    }
]

Happy coding!

Thanks @thomaskanzig I eventually figured out what the magic formula was in between Cloudfront and S3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants