Cross-Origin Resource Sharing (CORS) is a browser security mechanism that prevents malicious websites from making unauthorized requests to your APIs or Storage buckets. When you try to upload a file to Firebase Storage from a Next.js or React application running on a different domain (or localhost), the browser blocks it.
Unlike Firebase Authentication, which has a nice UI for whitelisting domains, Firebase Storage and Cloud Functions require you to explicitly configure CORS headers using raw configuration files and terminal commands.
TL;DR: How to fix Firebase Storage CORS
- 11. Create a `cors.json` file on your local machine containing your allowed origins and methods.
- 22. Install the Google Cloud CLI (`gcloud`).
- 33. Run the gsutil command: `gsutil cors set cors.json gs://your-firebase-project.appspot.com`.
- 44. Wait 5-10 minutes for Google Cloud to propagate the new headers globally.
Root Causes
Firebase Storage Defaults
By default, Firebase Storage buckets do not include `Access-Control-Allow-Origin` headers in their HTTP responses. When your React app (`http://localhost:3000`) sends an `OPTIONS` preflight request to `firebasestorage.googleapis.com`, the browser sees no CORS headers and instantly throws a fatal error.
Cloud Functions Missing CORS Middleware
If you are calling an HTTP Callable Cloud Function directly via fetch (instead of the Firebase SDK), the function will reject the request unless you explicitly wrap the execution in the `cors` middleware package.
Step-by-Step Fix Guide
Create the cors.json Configuration
Create a file named `cors.json` in your project root. Define exactly which domains are allowed to hit your bucket.
[
{
"origin": ["http://localhost:3000", "https://your-production-app.com"],
"method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
"responseHeader": ["Content-Type", "Authorization"],
"maxAgeSeconds": 3600
}
]- Avoid using `["*"]` for origins in production. Always explicitly list your Vercel/Netlify URLs.
Apply the Configuration via gsutil
You cannot upload this file via the Firebase Console UI. You must use the Google Cloud CLI.
# 1. Login to Google Cloud
gcloud auth login
# 2. Set the CORS policy on your specific bucket
gsutil cors set cors.json gs://your-project-id.appspot.com- You can find your exact bucket URL in the Firebase Console -> Storage tab. It starts with `gs://`.
Fixing Cloud Functions CORS (Bonus)
If the CORS error is coming from a Firebase Cloud Function, install the `cors` npm package and wrap your handler.
const cors = require('cors')({ origin: true });
exports.myFunction = functions.https.onRequest((req, res) => {
cors(req, res, () => {
// Your function logic here
res.status(200).send({ success: true });
});
});File Uploads Blocking Your Launch?
CORS errors are notoriously difficult to debug because they hide the actual network failure. If your Firebase Storage integration is broken, let me configure your cloud permissions properly.
Get Urgent Cloud Configuration HelpRelated Errors
No 'Access-Control-Allow-Origin' header is present on the requested resource
This is the classic symptom. You must execute the `gsutil cors set` command.
Method PUT is not allowed by Access-Control-Allow-Methods
Your `cors.json` file is missing the `PUT` or `POST` method in the `"method"` array. Storage uploads require `PUT` or `POST`.
Prevention Strategy
- Commit your `cors.json` file to your repository and add a script in your `package.json` like `"deploy:storage-rules": "gsutil cors set cors.json gs://YOUR-BUCKET"` so team members can easily sync rules.
Still Stuck With This Issue?
Send your exact error message or deployment issue. I'll respond with a targeted fix.
Need a Deeper Fix?
Describe your full project issue below and I'll get back to you with a targeted fix.