Why is Google Cloud Storage always answering with cors error: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I'm trying to upload files to Google Cloud Storage (GCS) from the client browser. For that I have a back-end in node.js request a Signed URL from GCS, which is then transmitted to the front-end client to upload the file. The Signed URL request code is the following:

const options = {
    version: "v4",
    action: "write",
    expires: Date.now() + 15 * 60 * 1000, // 15 minutes
    contentType: content_type,
  };

  // Get a v4 signed URL for uploading file
  const [url] = await storage
    .bucket(bucketName)
    .file(filename)
    .getSignedUrl(options)

This is working. The issue comes when I try using the Signed URL on the client. Every request ends up with the following error:

Access to XMLHttpRequest at 'https://storage.googleapis.com/deploynets_models/keras_logo.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=urlsigner%40deploynets.iam.gserviceaccount.com%2F20200711%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20200711T192805Z&X-Goog-Expires=900&X-Goog-SignedHeaders=content-type%3Bhost&X-Goog-Signature=82b73435e4759e577e9d3b8056c7c69167fdaac5f0f450381ac616034b4830a7661bdb0951a82bf749a35dc1cf9a8493b761f8993127d53948551d7b33f552d118666dcf8f67f494cfaabf2268d7235e955e1243ce3cd453dcc32552677168ad94c6f1fca0032eb57941a806cc14139915e3cd3efc3585497715a8ad32a1ea0278f2e1165272951ae0733d5c6f77cc427fd7ff69431f74f1f3f0e7779c28c2437d323e13a2c6474283b264ab6dc6a94830b2b26fde8160684839a0c6ea551ca7eff8e2d348e09a8c213a93c0532f6fed1dd167cd9cf3480415c0c35987b27abd03684e088682eb5e89008d33dcbf630b58ea6b86e7d7f6574466aa2daa982566' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've set the CORS policy on the GCS bucket with the following JSON:

[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    "responseHeader": ["*"],
    "maxAgeSeconds": 120
  }
]

(I've also tried listing specifically the origin as http://localhost:3000 for example)

It should be mentioned that I have got it to work in one specific case: when the upload payload is just a plain string. For some reason it works fine then.

I've looked up online all the similar errors I could but to no avail so far. Any idea?

user3352975 user3352975 · Accepted Answer · 2020-07-12T07:05:45

I figured out what was wrong. In the upload code (browser side), I was passing a FormData object as the data to be uploaded, which for some reason was triggering the CORS error above. I fixed it when I passed the file directly.

So instead of using the following:

var data = new FormData()
data.append('file', event.target.files[0])

I use directly the file in event.target.files[0].

Why is Google Cloud Storage always answering with cors error: No 'Access-Control-Allow-Origin' header is present on the requested resource

1 Answers