Пытаетесь подключиться к функции firebase из приложения React? - PullRequest
Новая
       6

Пытаетесь подключиться к функции firebase из приложения React?

0 голосов
/ 01 января 2019

Я создаю приложение реакции.У меня есть код, подобный этому 

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

(у меня есть baseURL, настроенный для axios и все, поэтому 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-адрес напрямую, все работает.Я вижу свои вопросы.

Но в приложении реагирования я получаю следующую ошибку

Доступ к XMLHttpRequest по адресу "... / getQuestions" from origin "http://localhost:3000' был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

После некоторого поиска в Google я попытался 

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 functions

✔ functions: Закончен запуск сценария предустановки.i функции: обеспечение включения необходимых API-интерфейсов ... ✔ функции: включение всех необходимых API-интерфейсов i функции: подготовка каталога функций для загрузки ...

Ошибка: ошибка при синтаксическом анализе триггеров вашей функции.

TypeError: Невозможно прочитать свойство 'origin' undefined в ...

И т. Ч., Даже если эта команда сработала, я не знаю, является ли это правильным решением

1 Ответ

0 голосов
/ 01 января 2019

Понял :) Я делал что-то глупое 

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