Проблема CORS в Firebase Functions: проблема с заголовком “Access-Control-Allow-Credentials” несмотря на правильную настройку.

Question

Я сталкиваюсь с постоянной проблемой CORS, работая с HTTPS-функцией Firebase в своем приложении Vite.js на React, особенно при попытке интегрировать OAuth.

Проблема:
При попытке отправить запрос с моего фронтенда на функцию облака Firebase возникает следующая ошибка:callback:1 Доступ к fetch по адресу 'http://127.0.0.1:5001/my-project-id/us-central1/youtube/youtubeaccesstoken' из источника 'http://localhost:5173' был заблокирован политикой CORS: Ответ на предварительный запрос не проходит проверку контроля доступа: Значение заголовка 'Access-Control-Allow-Credentials' в ответе равно '' и должно быть 'true', когда режим проверки подлинности запроса 'include'.

Я установил credentials: ‘include’ в своем запросе fetch, и кажется, что Firebase не возвращает требуемый заголовок Access-Control-Allow-Credentials: true, даже несмотря на то, что я пытался настроить CORS как неявно, так и явно.

Что я пробовал:

Настройка функции Firebase: Я использовал onRequest Firebase с cors:
true для разрешения CORS

   
       const {
         onRequest
       } = require('firebase-functions/v2/https');
   
       exports.youtube = onRequest({
         timeoutSeconds: 360,
         cors: true
       }, (req, res) => {
         // Обработка предварительного запроса OPTIONS
         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;
         }
   
         // Обработка фактического запроса
         res.set('Access-Control-Allow-Origin', 'http://localhost:5173');
         res.set('Access-Control-Allow-Credentials', 'true');
   
         youtubeService(req, res);
       });

Запрос fetch на стороне клиента: Запрос fetch на стороне клиента настроен на включение учетных данных:

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
  }),
});

Я также пробовал другой подход для своей функции firebase, так как я использую express.

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

const corsOptions = {
  origin: "http://localhost:5173", // Использовать конкретный источник вместо true
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS",
  credentials: true, // Разрешить учетные данные
  allowedHeaders: ["Content-Type", "Authorization"],
};

youtubeService.use(cors(corsOptions));

//и остальные REST-эндпоинты

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

Ожидаемое поведение:
Функция Firebase должна разрешать кросс-доменные запросы, возвращая необходимые заголовки CORS, особенно Access-Control-Allow-Credentials: true, при использовании credentials: ‘include’ на фронтенде.

Вещи, которые стоит учитывать:

Firebase, по идее, должен неявно обрабатывать предварительный запрос, но
я установил это явно, чтобы быть уверенным.
Все остальные заголовки CORS, похоже, работают нормально, кроме
Access-Control-Allow-Credentials

.

Проблема CORS в Firebase Functions: проблема с заголовком “Access-Control-Allow-Credentials” несмотря на правильную настройку.

Вопрос или проблема

Ответ или решение

Решение проблемы CORS с заголовком "Access-Control-Allow-Credentials" в Firebase Functions

Основная проблема

Пошаговое решение

Что учитывать

Заключение