带有 typescript 和 axios 的 Cloud Functions 中的 CORS

Question

在我的反应应用程序中，我正在向云函数名称和电话发送具有 2 个属性的发布请求，但在反应应用程序中返回来自 CORS 的限制，我正在使用带有 Typescript 的云函数 这是我的反应应用程序中的代码

        axios
          .post(
            "https://us-central1-react-firebase-athentica-64987.cloudfunctions.net/firestoreTtlCallback",
            {
              name: `${this.state.contactName}`,
              phone: `${this.state.phone}`,
            }
          )
          .then(function(response) {
            // eslint-disable-next-line no-console
            console.log(response);
          })
          .catch(function(error) {
            // eslint-disable-next-line no-console
            console.log(error);
          });
      }); ```

这是来自我的云功能：

exports.firestoreTtlCallback = functions.https.onRequest(async(req , res) => {
    res.set('Access-Control-Allow-Origin', "*")
    res.set('Access-Control-Allow-Methods', 'GET, POST')
    res.set('Access-Control-Allow-Headers', 'Content-Type');

    const name = req.body.name;
    console.log(name)
    //recibir nombre de contacto y numero de telefono
    const payload = req.body as ExpirationTaskPayload
    try {

        // buscar usuario y obtener token
        const user = await db.collection('users').doc(payload.uid).get()
        const data:any = user.data()
        const counter = await admin.firestore().collection("users").doc(payload.uid).collection("kards").doc("0").collection("kardsRef").get();
        const doc = await admin.firestore().doc(`/users/${payload.uid}/kards/0/kardsRef/${counter.size}`)
        doc.set({ msg: "hola" })
        var message = {
            data: {
              score: '850',
              time: '2:45'
            },
            token: data.token
          };
        //enviar notificacion
        await admin.messaging().send(message)

        // Response is a message ID string.
        // borrar notificacion firestore
        await admin.firestore().doc(payload.docPath).delete()
        return res.status(200).send(`Task has been executed`);
    }
    catch (error) {
        console.error(error)
        return res.status(500).send(error)

    }

    });

这是我得到的错误：

从源“http://localhost:3000”获取“https://us-central1-react-firebase-athentica-64987.cloudfunctions.net/firestoreTtlCallback”的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

Answer 1

您将在文档中找到here，详细了解如何启用 CORS 支持。所以以下应该可以解决问题（未经测试）：

//...

import * as cors from 'cors';

const corsOptions = { origin: true };
const corsMiddleware = cors(corsOptions);

//...

exports.firestoreTtlCallback = functions.https.onRequest(async (req, res) => {

    corsMiddleware(req, res, () => {

        const name = req.body.name;
        console.log(name);
        //recibir nombre de contacto y numero de telefono
        const payload = req.body as ExpirationTaskPayload;
        try {
            // buscar usuario y obtener token
            const user = await db
                .collection('users')
                .doc(payload.uid)
                .get();
            const data: any = user.data();
            const counter = await admin
                .firestore()
                .collection('users')
                .doc(payload.uid)
                .collection('kards')
                .doc('0')
                .collection('kardsRef')
                .get();
            const doc = await admin
                .firestore()
                .doc(`/users/${payload.uid}/kards/0/kardsRef/${counter.size}`);
            doc.set({ msg: 'hola' });
            var message = {
                data: {
                    score: '850',
                    time: '2:45'
                },
                token: data.token
            };
            //enviar notificacion
            await admin.messaging().send(message);

            // Response is a message ID string.
            // borrar notificacion firestore
            await admin
                .firestore()
                .doc(payload.docPath)
                .delete();
            return res.status(200).send(`Task has been executed`);
        } catch (error) {
            console.error(error);
            return res.status(500).send(error);
        }

    });

});