ReactJS and Firebase API: Issue with Post request not reaching Firebase backend [duplicate]

Question

https://github.com/RamanSharma100/react-firebase-file-management-system/issues/2#issuecomment-1666569161

firebase post error. I'm trying to connect to firebase, but I'm getting these errors. Can anyone guide me to solve this problem?

I am able to log in and register users and the backend is working fine but the problem is with firebase storage.

I encountered the following error:

connection.ts:81 POST https://firebasestorage.googleapis.com/v0/b/cloud-file-management-system.appspot.com/o?name=files/FT2YJy4lk3gTKb5ezJMH2fYPUrq1/New Text Document.txtNetwork: :ERR_FAILED

XMLHttpRequest accessing 'https://firebasestorage.googleapis.com/v0/b/cloud-file-management-system.appspot.com/o?name=files/FT2YJy4lk3gTKb5ezJMH2fYPUrq1/New Text Document.txt' is blocked by CORS policy Blocking: The response to the preflight request failed the access control check: it has no HTTP ok status.

connection.ts:81 POST https://firebasestorage.googleapis.com/v0/b/cloud-file-management-system.appspot.com/o?name=files/FT2YJy4lk3gTKb5ezJMH2fYPUrq1/New Text Document.txtNetwork: :ERR_FAILED

XMLHttpRequest accessing 'https://firebasestorage.googleapis.com/v0/b/cloud-file-management-system.appspot.com/o?name=files/FT2YJy4lk3gTKb5ezJMH2fYPUrq1/New Text Document.txt' is blocked by CORS policy Blocking: The response to the preflight request failed the access control check: it has no HTTP ok status.

Answer 1

This is because of the CORS policy. You need to configure CORS policy in Firebase Storage, you can follow these steps:

Step 1. Create cors.json file, for example:

[
  {
    "origin": ["http://localhost:3000"],
    "method": ["GET", "POST", "PUT", "DELETE"],
    "maxAgeSeconds": 4000,
    "responseHeader": ["Content-Type", "Authorization"]
  }
]

Step 2. When configuring the CLI using Firebase CLI, upload this configuration file (if it has not been configured yet)

Command line input:

Replace "cloud-file-management-system.appspot.com" with your specific Firebase Storage URL.

gsutil cors set cors.json gs://cloud-file-management-system.appspot.com