CORS error while uploading image on Google Cloud Bucket - google-cloud-storage

Question

I am trying to upload images directly from the browser to the Google Cloud bucket. I am using gcs-signed-urls on the backend and followed this example.
Here is my Form upload which is working fine.
<form action={"https://" +this.state.imageForm.bucket +".storage.googleapis.com"} method="post" enctype="multipart/form-data">
<input type="hidden" name="key" value={this.state.imageForm.key}></input>
<input type="hidden" name="bucket" value={this.state.imageForm.bucket}></input>
<input type="hidden" name="GoogleAccessId" value={this.state.imageForm.GoogleAccessId}></input>
<input type="hidden" name="policy" value={this.state.imageForm.policy}></input>
<input type="hidden" name="signature" value={this.state.imageForm.signature}></input>
<input type="hidden" name="Content-Type" value={this.state.imageForm.contenttype}></input>
<input name="file" type="file"></input>
<input type="submit" value="Upload"></input>
Now I am trying to turn this into form post request using Axios.
let data = new FormData();
data.append("key",this.state.imageForm.key+ "." + picture[0].type.replace("image/", ""))
data.append("bucket", this.state.imageForm.bucket);
data.append("GoogleAccessId", this.state.imageForm.GoogleAccessId);
data.append("policy", this.state.imageForm.policy);
data.append("Content-Type", 'application/octet-stream');
data.append("file", picture[0]);
console.log("data", data);
let config = {
headers: {
'Content-Type': 'multipart/form-data',
'Access-Control-Allow-Origin': '*',
}
}
let result = await axios.post("https://" + this.state.imageForm.bucket + ".storage.googleapis.com",
data, config)
I am getting 2 errors:
1 - CROS error
create:1 Access to XMLHttpRequest at 'https://ccc.storage.googleapis.com/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2- Post request is failing with 400 error with the response.
Here is a snapshot from the developer console.
I also updated the Cors file for my bucket, here is the config
{
"origin": [*],
"responseHeader": ["Content-Type", "access-control-allow-origin"],
"method": ["GET", "HEAD", "DELETE", "PUT", "POST"],
"maxAgeSeconds": 3600
}

Answer 1

I found the following note in the API POST method docs
Note: The POST object method does not support signed URLs, except in the case of resumable uploads.
So you can try the PUT method or doing a resumable upload as stated at the docs