I'm developing a Web App and Chrome extensions with React App (CRA) and I want users to be able to upload files to a Google Storage bucket, directly from the front-end. The BE (backend) generates a signed URL and sends it to the front-end. Then, the front-end takes that URL and uses it to make a PUT request to the Google Cloud Storage bucket. The backend code looks like this:
url = blob.generate_signed_url(expiration=expiration_date, method='PUT', content_type=content_type, version='v4')
Issue: From the localhost Webapp (localhost:3000), I keep getting CORS errors when trying to upload files. However, when I ran the same code in the Chrome extension, it succeeded.
Some more info:
- cors config on the bucket includes localhost:3000 and still fails.
cors_config: - maxAgeSeconds: 3000 method: - PUT - POST - GET - HEAD origin: - http://localhost:3000
- I tried with signed URL v2 and v4. Also, I verified that the content type is correct.
- The front-end request to the bucket includes the "Content-Type" header.
Any ideas what I am missing?