How to fix Hosting: CORS configuration not set up properly in Firebase

FirebaseINTERMEDIATEHIGHUpdated Dec 29, 2025· 129 views

Firebase Hosting blocks cross-origin requests to Cloud Functions and APIs unless CORS headers are explicitly configured. Enable CORS by setting headers in firebase.json or adding CORS middleware to your Cloud Functions.

Quick fix

Fixes Hosting: CORS configuration not set up properly

cd functions
npm list cors
  1. Check if you're using Cloud Functions
  2. Configure CORS headers in firebase.json for rewrites
  3. Handle OPTIONS preflight requests
  4. Configure CORS for Firebase Storage
firebase — error
cd functions
npm list cors
Hosting: CORS configuration not set up properly

What this error means

Cross-Origin Resource Sharing (CORS) is a security mechanism that prevents scripts on one domain from accessing resources on another domain without explicit permission. By default, Firebase Hosting and Cloud Functions don't include CORS headers in their responses, which means browsers will block requests from frontend applications running on different origins. This error occurs when your frontend (hosted on one domain or port) tries to fetch data from a Firebase Cloud Function, API endpoint, or storage bucket on a different origin, but the server hasn't been configured to allow such requests.

Typical symptoms

  • Browser console shows 'No 'Access-Control-Allow-Origin' header' error
  • Network tab shows requests being blocked by CORS policy
  • Fetch or XMLHttpRequest calls fail with status 0 or get no response
  • Frontend works locally but fails when deployed to different domain
  • API calls work in Postman or curl but fail in browser

Common causes

  1. Cloud Function doesn't have CORS middleware configured in its code
  2. firebase.json headers configuration is missing or incomplete
  3. CORS headers only specified for specific paths, not the API endpoint
  4. Rewrite rules in firebase.json don't include necessary CORS headers
  5. Firebase Storage bucket accessed directly without CORS configuration
  6. Frontend and backend run on different origins during local development

How to fix "Hosting: CORS configuration not set up properly"

1Check if you're using Cloud Functions

If your Firebase project uses Cloud Functions as the backend, CORS must be configured in the function code itself using the cors npm package.

First, check your functions directory to see if the cors package is already installed:

bash
cd functions
npm list cors

If not installed, add it:

bash
npm install cors

Then update your Cloud Function to wrap your logic with CORS:

typescript
import * as functions from 'firebase-functions';
import * as cors from 'cors';

const corsHandler = cors({ origin: true });

export const myApi = functions.https.onRequest((req, res) => {
  corsHandler(req, res, () => {
    // Your function logic here
    res.json({ message: 'Success' });
  });
});

The origin: true setting allows requests from any origin. For production, specify allowed origins:

typescript
const corsHandler = cors({
  origin: ['https://yourdomain.com', 'https://app.yourdomain.com']
});

Deploy the updated functions:

bash
firebase deploy --only functions
2Configure CORS headers in firebase.json for rewrites

If you're using Firebase Hosting rewrites to proxy requests to Cloud Functions or external APIs, add CORS headers in your firebase.json:

json
{
  "hosting": {
    "rewrites": [
      {
        "source": "/api/**",
        "function": "myApi"
      }
    ],
    "headers": [
      {
        "source": "/api/**",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          },
          {
            "key": "Access-Control-Allow-Methods",
            "value": "GET, POST, OPTIONS, PUT, DELETE"
          },
          {
            "key": "Access-Control-Allow-Headers",
            "value": "Content-Type, Authorization"
          }
        ]
      }
    ]
  }
}

For specific origins instead of wildcard:

json
{
  "key": "Access-Control-Allow-Origin",
  "value": "https://yourdomain.com"
}

Redeploy hosting:

bash
firebase deploy --only hosting
3Handle OPTIONS preflight requests

Browsers send an OPTIONS preflight request before actual requests when using certain methods or headers. Make sure your Cloud Function responds to OPTIONS requests:

typescript
import * as functions from 'firebase-functions';
import * as cors from 'cors';

const corsHandler = cors({ origin: true });

export const myApi = functions.https.onRequest((req, res) => {
  corsHandler(req, res, () => {
    if (req.method === 'OPTIONS') {
      res.sendStatus(204);
      return;
    }

    // Handle GET, POST, etc.
    if (req.method === 'GET') {
      res.json({ message: 'Success' });
    } else {
      res.status(405).send('Method not allowed');
    }
  });
});

The cors middleware handles OPTIONS automatically, so this is only needed if you're not using the middleware.

4Configure CORS for Firebase Storage

If the error involves Firebase Storage (serving images, files directly from Cloud Storage), configure CORS using the Google Cloud CLI:

First, create a cors.json file:

json
[
  {
    "origin": ["https://yourdomain.com"],
    "method": ["GET", "HEAD"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

For development with multiple origins:

json
[
  {
    "origin": ["http://localhost:3000", "https://yourdomain.com"],
    "method": ["GET", "HEAD", "PUT", "POST", "DELETE"],
    "responseHeader": ["Content-Type", "Authorization"],
    "maxAgeSeconds": 3600
  }
]

Apply the CORS configuration to your storage bucket:

bash
gsutil cors set cors.json gs://your-bucket-name.appspot.com

Verify it was applied:

bash
gsutil cors get gs://your-bucket-name.appspot.com
5Test CORS configuration locally

For local development, start by testing with a permissive CORS configuration:

json
{
  "key": "Access-Control-Allow-Origin",
  "value": "*"
}

Use browser DevTools to check headers in the Network tab:
1. Open DevTools (F12)
2. Go to Network tab
3. Make the request
4. Click on the request and check Response Headers
5. Look for access-control-allow-origin header

From the terminal, test with curl:

bash
curl -i -X OPTIONS https://yourdomain.com/api/endpoint \
  -H "Origin: http://localhost:3000" \
  -H "Access-Control-Request-Method: GET"

You should see Access-Control-Allow-Origin in the response headers.

Advanced notes

CORS is a browser security feature that only applies to web requests, not server-to-server communication. Testing with curl or Postman will bypass CORS because these tools are not browsers.

When using Firebase Emulator Suite locally, CORS errors may occur because your frontend (localhost:3000) and emulated functions (localhost:5001) are on different origins. Configure CORS to allow localhost during development.

The wildcard origin (*) is convenient for development but should not be used in production. Instead, explicitly list allowed domains. If you need multiple subdomains, use a regex pattern in the cors middleware:

typescript
const corsHandler = cors({
  origin: /^https:\/\/.*\.yourdomain\.com$/,
  credentials: true
});

For sensitive endpoints, always specify credentials: true and avoid using wildcard origins to prevent unauthorized access.

Frequently asked questions

What does "Hosting: CORS configuration not set up properly" mean?
Cross-Origin Resource Sharing (CORS) is a security mechanism that prevents scripts on one domain from accessing resources on another domain without explicit permission. By default, Firebase Hosting and Cloud Functions don't include CORS headers in their responses, which means browsers will block requests from frontend applications running on different origins. This error occurs when your frontend (hosted on one domain or port) tries to fetch data from a Firebase Cloud Function, API endpoint, or storage bucket on a different origin, but the server hasn't been configured to allow such requests.
How do I fix "Hosting: CORS configuration not set up properly"?
Firebase Hosting blocks cross-origin requests to Cloud Functions and APIs unless CORS headers are explicitly configured. Enable CORS by setting headers in firebase.json or adding CORS middleware to your Cloud Functions.
What causes "Hosting: CORS configuration not set up properly"?
Cloud Function doesn't have CORS middleware configured in its code firebase.json headers configuration is missing or incomplete CORS headers only specified for specific paths, not the API endpoint
Is the "Hosting: CORS configuration not set up properly" error serious?
Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading