CORS Error When Fetching File From Firebase Storage

51 Views Asked by At

I am running into an issue where I am getting a CORS error when trying to fetch an Excel file from Firebase Storage.

This is the error I am getting:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <Firebase_Storage_File_URL>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

This is my 'cors.json' that I set in Google Cloud:

[
    {
        "origin": ["https://<Firebase_Project_ID>.web.app"], 
        "method": ["GET, POST"],
            "responseHeader": ["Content-Type"], 
        "maxAgeSeconds": 3600
    }
]

This is my CORS configuration in my 'index.js' file:

app.use(cors({
  origin: 'https://<Firebase_Project_ID>.web.app',
  credentials: true
}));

This is how I am trying to fetch the Excel file from Firebase Storage on the client-side:

let response;
try {
    response = await fetch(filePath, {
        method: 'GET',
        mode: 'cors',
        credentials: 'include'
    });
    console.log("Excel file fetch response: ", response);
} catch (error) {
    console.error("Error fetching the Excel file:", error);
    return "Error fetching the Excel file: " + error;
}

I have tried setting the 'cors.json' that I have shared above in Google Cloud. I have also tried changing the origin to just "*". However, I find that although it says my changes have been set in Google Cloud, I still get the same CORS error when trying to load the file.

In my 'index.js' CORS configuration (shared above), I have tried changing the origin between "https://<Firebase_Project_ID>.web.app" and "*".

On the client-side, initially I was just doing response = await fetch(filePath). As I started experimenting with it to try and resolve the CORS issue, I added the 'method', 'mode', and 'credentials' attributes to the fetch call.

For the 'index.js' CORS configuration and client-side changes, I redeployed the app each time I made a change. However, each time, I still got the same CORS error.

Just to note: my web app is already hosted using Firebase and Google Cloud Run, if that has anything to do with this issue.

I have been struggling with this problem for a long time and have scoured the internet for help, but could not find anything that worked for me. I would really appreciate any help!

0

There are 0 best solutions below