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

FirebaseINTERMEDIATEHIGH

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 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.

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.

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

What this error means

Typical symptoms

Common causes

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

Advanced notes

Related errors

Official resources & further reading