Облачная функция Firebase CORS проблема в TypeScript

Question

Я знаю, что есть масса сообщений и решений CORS, и я много раз их просматривал. Не удалось решить мою проблему с CORS в нерабочее время, и я решил опубликовать здесь:)

мой клиент angular метод импортировал и инициализировал пакет

...import { AngularFireFunctions } from "@angular/fire/functions";
  constructor(...
    private afn: AngularFireFunctions,
  ) {}

  initCloudFunctions() {
    let cmd = "helloWorld";
    const callable = this.afn.httpsCallable(cmd);
    let data = callable({ name: "some-data" }).subscribe({
      next(res) {
        console.log("res: ", res);
      },
      error(msg) {
        console.log("Error : ", msg);
      }
    });
  }

My firebase cloud-function (в TypeScript), index.ts

export const helloWorld = functions.https.onRequest((request, response) => {
    response.set('Access-Control-Allow-Origin', '*');
    // let url = 'https://a1rvv0rk2.stackblitz.io/main/firecp'
    // response.set('Access-Control-Allow-Origin', url);
    response.set('Access-Control-Allow-Credentials', 'true');
    response.set('Access-Control-Allow-Headers', 'Content-Type')

    response.send("Hello from Firebase! " + new Date());
});

Я использовал подстановочный знак, но все равно получаю ошибку CORS

Доступ к выборке в 'https://...my project .... cloudfunctions.net/helloWorld 'from origin' https://..my project .... stackblitz.io 'заблокировано политикой CORS: авторизация поля заголовка запроса не разрешена Access- Control-Allow-Headers в предполетном ответе. зона. js: 1118 POST https://...my проект ..... cloudfunctions.net/helloWorld net :: ERR_FAILED

очень признателен, если бы я мог получить некоторые помогает от гуру.

Обновления: Спасибо, Дуг, и Ларс с YouTube , мне удалось успешно импортировать CORS! вот мой обновленный код и надеюсь, что он поможет тем, кто использует TypeScript вместо JavaScript

import CORS lib

import * as corsModule from 'cors'
const cors = corsModule(({ origin: true }))

Cloud Function

export const helloWorldWithCORS = functions.https.onRequest((request, response) => {
    // ref: https://github.com/firebase/firebase-js-sdk/issues/1338#issuecomment-461234192
    cors(request, response, () => {
        response.status(200).send({data: { success: true, message: 'yeah!' }})
    })
});

Angular Приложение

 async initCloudFunctions() {
    // let cmd = "helloWorld";
    let cmd = "helloWorldWithCORS";
    const callable = this.afn.httpsCallable(cmd);

    this.data = await callable({name: 'some data'})
    console.log(this.data)
  }

Answer 1

Попробуйте добавить дополнительный заголовок allow:

  response.set('Access-Control-Allow-Headers','Content-Type')

Это должно быть неявным в соответствии с документами mozzilla:

Заголовки запроса CORS-safelisted, Accept, Accept-Language Content-Language, Content-Type всегда разрешены и не обязательно должны быть перечислены в этом заголовке. Однако обратите внимание, что к этим заголовкам применяются дополнительные ограничения, которые вы обойдете, перечислив эти заголовки и в заголовок Access-Control-Allow-Headers.

From: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

Возможно, могут присутствовать дополнительные блокировки