How can I setup CORS properly to upload file with a presignedUrl to firebase storage?

Question

I have been trying to upload an image directly from my react spa to my firebase bucket but I can't configure the cors properly.

I set the cors configuration in muy bucket using the GCP console, as:

[
  {
    "origin": ["http://localhost:3000"],
    "method": ["PUT"],
    "responseHeader": [
        "Content-Type",
        "Access-Control-Allow-Origin",
        "x-goog-resumable"],
    "maxAgeSeconds": 3600
  }
]

but it doesn't works in the browser, instead in postman it works as expected.

My app implementation works as follows:

First I generate the presigned url in my node api as:

const admin = require('firebase-admin');
const uuid = require('uuid');

admin.initializeApp({
    credential: admin.credential.applicationDefault(),
    storageBucket: "<BUCKET-NAME>"
});

var bucket = admin.storage().bucket();

const generateSignedUrl = async (userId) => {
    const key = `${userId}/${uuid.v1()}.jpeg`;
    const options = {
        version: 'v4',
        action: 'write',
        expires: Date.now() + 5*60 * 1000,
        contentType: 'image/jpeg'
    };

    const [ url ] = await bucket
        .file(key)
        .getSignedUrl(options);

    return [url, key];
};

Then in the spa I use axios to perform the put request in order to upload the file using the presignedUrl provided from my node api.

 const config = {
   headers: { 'Content-Type': 'application/octet-stream' }
 };
 await axios.put(presignedUrl, file, config);

But the CORS error appears:

Access to XMLHttpRequest at 'https://storage.googleapis.com/...' from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Looking briefly at [the docs](https://cloud.google.com/storage/docs/configuring-cors), it seems you've configured `responseHeader` incorrectly. Also, you want the REST API version, not `gsutil` — Phil, May 21 '20 at 00:17
Can you go throught [this troubleshotting steps](https://cloud.google.com/storage/docs/configuring-cors#troubleshooting)? Specially points 4 and 5. It seems you are missing some hearders in your request. — llompalles, May 21 '20 at 13:52
I had reviewed that too, but I didn't realize what was my error, Could you specify exactly what it is @llompalles ? please — Juan Parra, May 21 '20 at 16:11
Your error is related with the `Access-Control-Allow-Origin` and `Origin` hearders which is causing the failure in the CORS request as described [here](https://cloud.google.com/storage/docs/cross-origin#how_cors_works). It is hard to troubleshoot in remote but could you change the `"origin": ["http://localhost:3000"]` to the wildcard `"origin": ["*"]` in the CORS configuration? — llompalles, May 22 '20 at 14:31

Juan Parra · Accepted Answer · 2020-05-24T03:54:39.533

Finaly I resolved my issue, I post the answer here, maybe it could help someone else. I had two issues.

First, I had been sending an authorization header for all the requests and due to my CORS configuration firebase doesn't profile it correctly. I decided to omit the auth header for the presigned upload request as:

    delete axios.defaults.headers.common["x-auth-token"];

Second, the contentType header was set up incorrectly, but due to chrome doesn't show the options requests in the network tab by default (out-of-blink-cors), the No 'Access-Control-Allow-Origin' header is present.. error always appeared. Once I figured out the correclty error thanks to firefox, I change the options for signedUrl generation as:

    const options = {
        version: 'v4',
        action: 'write',
        expires: Date.now() + 5*60 * 1000,
        contentType: `image/${type}`
    };

where type is the type of the image to upload, provided from the spa.

The cors configuration works as expected.

[{
    "origin": ["http://localhost:3000"],
    "method": ["PUT"],
    "responseHeader": [
        "Content-Type"
    ],
    "maxAgeSeconds": 3600
}]

Good work finding the solution! Can you [accept your own answer](https://stackoverflow.blog/2009/01/06/accept-your-own-answers/)? It will make it more visible and help someone with the same issue as you find the solution. Thanks! — llompalles, May 27 '20 at 07:38

How can I setup CORS properly to upload file with a presignedUrl to firebase storage?

1 Answers1