Firebase Function CORS Issue: “Access-Control-Allow-Credentials” Header Issue Despite Correct Setup

I’m encountering a persistent CORS issue while working with a Firebase HTTPS function in my Vite.js React app, specifically when trying to integrate OAuth.

Problem:
The following error is thrown when I try to send a request from my frontend to a Firebase Cloud Function:callback:1 Access to fetch at 'http://127.0.0.1:5001/my-project-id/us-central1/youtube/youtubeaccesstoken' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

I have set credentials: ‘include’ on my fetch request, and it seems that Firebase is not returning the required Access-Control-Allow-Credentials: true header, even though I have tried setting CORS both implicitly and explicitly.

What I’ve Tried:

Firebase Function Setup: I’ve used Firebase’s onRequest with cors:
true to allow CORS

   
       const {
         onRequest
       } = require('firebase-functions/v2/https');
   
       exports.youtube = onRequest({
         timeoutSeconds: 360,
         cors: true
       }, (req, res) => {
         // Handle the preflight OPTIONS request
         if (req.method === 'OPTIONS') {
           res.set('Access-Control-Allow-Origin', 'http://localhost:5173');
           res.set('Access-Control-Allow-Methods', 'GET, POST');
           res.set('Access-Control-Allow-Headers', 'Authorization, Content-Type');
           res.set('Access-Control-Allow-Credentials', 'true');
           res.status(204).send('');
           return;
         }
   
         // Handle the actual request
         res.set('Access-Control-Allow-Origin', 'http://localhost:5173');
         res.set('Access-Control-Allow-Credentials', 'true');
   
         youtubeService(req, res);
       });

Client-Side Fetch: The client-side fetch request is set to include credentials:

fetch('http://127.0.0.1:5001/my-project-id/us-central1/youtube/youtubeaccesstoken', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    code,
    state,
    userId
  }),
});

I have also tried a different approach for my firebase function as i am using express.

const youtubeService = express();
youtubeService.use(express.json());
youtubeService.use(cookieParser());

const corsOptions = {
  origin: "http://localhost:5173", // Use specific origin instead of true
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS",
  credentials: true, // Allow credentials
  allowedHeaders: ["Content-Type", "Authorization"],
};

youtubeService.use(cors(corsOptions));

//and the rest of the REST endpoints





exports.youtube = onRequest({
    timeoutSeconds: 360,
    cors: true,
  },
  youtubeService
);

Expected Behavior:
The Firebase function should allow cross-origin requests, returning the necessary CORS headers, particularly Access-Control-Allow-Credentials: true, when using credentials: ‘include’ on the frontend.

Things to Consider:

Firebase is supposed to handle the preflight request implicitly, but
I’ve explicitly set it just to be sure.
All other CORS headers seem to be working fine, except for
Access-Control-Allow-Credentials