试图从React应用程序连接到firebase功能-cors问题？

Question

我正在创建一个react应用程序。我有这样的代码

async componentDidMount() {
    const questions = await axios.get('getQuestions');
    console.log(questions);
}

（我为axios和all设置了baseURL，因此URL是正确的）

我创建了一个firebase函数，如下所示（typescript）

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';

admin.initializeApp();
admin.firestore().settings({ timestampsInSnapshots: true });
const db = admin.firestore();

exports.getQuestions = functions.https.onRequest(async (request, response) => {
    const questions = [];
    const querySnapshot = await db.collection('questions').get();
    const documents = querySnapshot.docs;
    documents.forEach(doc => {
        questions.push(doc.data());
    });
    response.json({ questions: questions });
});

现在，当我构建并运行firebase deploy——only函数，然后直接访问url时，一切正常。我明白我的问题。

但是在react应用程序中，我得到以下错误

从源http://localhost:3000访问XMLHttpRequest的权限已被CORS策略阻止：请求的资源上不存在访问控制允许源标头。

在谷歌搜索之后，我试了一下

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';

admin.initializeApp();
admin.firestore().settings({ timestampsInSnapshots: true });
const db = admin.firestore();

const cors = require('cors')({ origin: true });

exports.getQuestions = functions.https.onRequest(
    cors(async (request, response) => {
        const questions = [];
        const querySnapshot = await db.collection('questions').get();
        const documents = querySnapshot.docs;
        documents.forEach(doc => {
            questions.push(doc.data());
        });
        response.json({ questions: questions });
    })
);

但当我运行firebase部署时，这只是给了我一个错误——仅限函数

✔函数：完成预部署脚本的运行。i函数：确保启用了必要的应用编程接口...✔函数：启用了所有必要的应用编程接口i函数：准备上传的函数目录...

错误：分析函数触发器时出错。

TypeError:无法读取在处未定义的属性“origin”。。。

tbh，即使这个命令有效，我也不知道它是否是正确的解决方案

Answer 1

这个答案将帮助那些面临cors错误的人。

01-创建名为BtnTrigger的Firebase函数（您可以随意命名）

// Include Firebase Function 
const functions =  require('firebase-functions');

// Include Firebase Admin SDK
const admin =  require('firebase-admin');
admin.initializeApp();

//cors setup include it before you do this 
//run npm install cors if its not in package.json file
const cors =  require('cors');

//set origin true
const corsHandler =  cors({ origin: true });

//firebase function 
export  const BtnTrigger =  functions.https.onRequest((request, response) => {
    corsHandler(request, response, async () => {
    //response.send("test");
    response.status(200).json({ data: request.body });
   });
});

然后运行Firebase部署-只有函数这将创建你的Firebase函数.如果你需要你可以从你的Firebase控制台检查它。

02-从应用程序代码从应用程序创建函数触发器

我使用了相同的BtnTrigger名称来正确理解它。您可以在此处更改变量，但httpscalable参数应与您创建的Firebase函数名称相同。

var BtnTrigger =firebase.functions().httpsCallable('BtnTrigger');
BtnTrigger({ key: value }).then(function(result) {
    // Read result of the Cloud Function.
    console.log(result.data)
    // this will log what you have sent from Application BtnTrigger 
    // { key: value}
});

不要忘记从应用程序代码中导入“firebase/functions”

Answer 2

明白了：）我在做傻事

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

exports.getQuestions = functions.https.onRequest(async (request, response) => {
    corsHandler(request, response, async () => {
        const questions = [];
        const querySnapshot = await db.collection('questions').get();
        const documents = querySnapshot.docs;
        documents.forEach(doc => {
            questions.push(doc.data());
        });
        response.status(200).json({ questions: questions });
    });
});