Question

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

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

（我为axios和所有人设置了baseURL，因此该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 });
});

现在，当我构建并运行firebase deploy --only功能，然后直接访问url时，一切正常。我看到了我的问题。

但是在react应用中，出现以下错误

从源头访问“ ... / getQuestions”处的XMLHttpRequest “ 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 --only函数时，这只是给我一个错误

✔功能：完成运行预部署脚本。我的职能是：   确保启用了必要的API ...✔功能：全部必要   在功能中启用了API：为以下功能准备功能目录   上传中...

错误：解析函数触发器时发生错误。

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'

尝试从React应用连接到Firebase功能-CORS问题？

2 个答案: