How to do Cors configuration For AWS S3 Bucket to make it work on React website?

In short:-

Issue on frontend:- Access to fetch at " api" from origin "websiteurl" 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.

Solution:-

Go to s3 console

  • Permissions
  • scroll to the CORS setting
  • copy paste this:-
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Backstory:- Recently, I just joined a new startup. The guy wanted me to make this speech annotation app on a website with react, so that user can annotate the timestamp regions and give a label for that.

Features:-

  • Simple Audio player playing the url from API.
  • Waveform from the Audio
  • Drag and Drop on the waveform to make the region.
  • Form - that appear on clicking the region.
  • Label should appear on the region.
  • Send a post request to the api.

Library used:-

  • Wavesurfer.js ---> best library to make this, already had a very good example of Speech annotation on their website and code execution can be found on the github.

Time taken :- 2-3 days to make the prototype

Here how the app looks like:-

speechAnnotation2.gif

No Comments Yet