- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
Comments
I also tried |
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 |
Cors is enabled on the server, the response headers don't contain Access-Control-Allow-Origin: . Still no solution even after I added:
How can we tweak the headers? |
The xhr option is now called fetchParams |
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
Anyone else seeing this issue? To get around this for now I am simply fetching the file manually and calling wavesurfer?.loadBlob(blob). |
@johnbonds In S3 you can configure CORS for each bucket:
[
{
"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. |
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
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.
The text was updated successfully, but these errors were encountered: