Uploading file in react js with resumable upload url is failing in google cloud storage, throwing CORS policy error

0
votes

I am trying to upload blob in react js with resumable upload url in google cloud storage, but it keeps failing with the error "Request failed with status code 308" and "from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

// fileBlob is converted from canvas -> dataUrl(jpeg) -> blob

const headers = {
                'Content-Type': 'image/jpeg',
            };
const response = yield axios.put(resumable_upload_url, fileBlob, {headers});

Can anyone please point out what am I missing here, many thanks in advance !

1
javascriptreactjscorsgoogle-cloud-storage

1 Answers

0
votes

Getting HTTP response code 308 in response to a query of the resumable session URI indicates you need to continue uploading the file - see https://cloud.google.com/storage/docs/performing-resumable-uploads

The response in this case should be "308 Resume Incomplete". I suspect the "Request failed" message you're seeing is being generated by the library you're using, and that library doesn't understand the resumable upload protocol.