试图从React应用程序连接到firebase函数-cors问题

Question

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

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

(我为axios和所有设置了一个基本URL，所以URL是正确的)

我创建了一个firebase函数如下(打字脚本)

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

现在，当我构建并运行firebasedeploy-only函数，然后直接访问url时，一切都正常。我看到了我的问题。

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

在"…"访问XMLHttpRequest/getQuestions来自原始'http://localhost:3000'已被CORS策略阻止：否请求的上存在"Access Control Allow Origin"标头资源

经过一些谷歌搜索，我尝试了

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 deploy时，这给了我一个错误——只运行

✔函数：已完成预部署脚本的运行。i函数：确保启用必要的API。。。✔功能：所有必需API已启用i函数：准备函数目录正在上载。。。

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

TypeError:无法读取未定义的属性"origin"在

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

Answer 1

明白了：)我在做一些愚蠢的

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

Answer 2

这个答案将帮助那些面临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 deploy --only functions，这将创建您的firebase函数。如果需要，可以从Firebase控制台进行检查。

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

我使用了相同的BtnTrigger名称来正确理解它——你可以在这里更改变量，但httpsCallable参数应该和你创建的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}
});

不要忘记从您的应用程序代码中import 'firebase/functions'