Enabling CORS in Cloud Functions for Firebase - Ionic Angular Firebase Error

非 Y 不嫁゛ 提交于 2020-06-17 09:59:12

问题


Im trying to get an array of posts from firebase database and show them in my feed page, but i get an error about something enabling cors and whatnot. Im new to Ionic, Firebase and Angular so any detailed help will be a lot appereciated

This is the functions of firebase code

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

const express = require('express');
const cors = require('cors');
const docs = express();
docs.use(cors({ origin: true }));


admin.initializeApp()

export const getFeed = functions.https.onRequest(async(req, res)=>{
    docs.get = await admin.firestore().collection('posts').limit(10).get()
    res.send(docs.docs.map((doc: { data: any; })=> doc.data))

}) 

This is the code of trying to call the posts in FeedPage

import { Component, OnInit } from '@angular/core';
import {AngularFireFunctions} from '@angular/fire/functions'


@Component({
  selector: 'app-feed',
  templateUrl: './feed.page.html',
  styleUrls: ['./feed.page.scss'],
})
export class FeedPage implements OnInit {

  constructor(private aff: AngularFireFunctions) { }

  ngOnInit() {

    const getFeed = this.aff.httpsCallable('getFeed')
    getFeed({}).subscribe(data=>{
        console.log(data)
    })

  }

}

So here im basically just console.log the array of posts from firebase which should just show me in the console all the posts and the data ive put to them
But instead i get this error

Access to fetch at 'https://us-central1-mk-recepti-80ae5.cloudfunctions.net/getFeed' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. zone-evergreen.js:1042 POST https://us-central1-mk-recepti-80ae5.cloudfunctions.net/getFeed net::ERR_FAILED (anonymous) @ zone-evergreen.js:1042 (anonymous) @ index.cjs.js:463 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 ZoneAwarePromise @ zone-evergreen.js:876 __awaiter @ tslib.es6.js:70 push../node_modules/@firebase/functions/dist/index.cjs.js.Service.postJSON @ index.cjs.js:454 (anonymous) @ index.cjs.js:528 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 invoke @ zone-evergreen.js:359 run @ zone-evergreen.js:124 (anonymous) @ zone-evergreen.js:855 invokeTask @ zone-evergreen.js:391 runTask @ zone-evergreen.js:168 drainMicroTaskQueue @ zone-evergreen.js:559 Promise.then (async) scheduleMicroTask @ zone-evergreen.js:542 scheduleTask @ zone-evergreen.js:381 scheduleTask @ zone-evergreen.js:211 scheduleMicroTask @ zone-evergreen.js:231 scheduleResolveOrReject @ zone-evergreen.js:845 resolvePromise @ zone-evergreen.js:791 (anonymous) @ zone-evergreen.js:707 webpackJsonpCallback @ bootstrap:24 (anonymous) @ firebase-functions.js:1 zone-evergreen.js:172 Uncaught Error: internal at new HttpsErrorImpl (index.cjs.js:58) at _errorForResponse (index.cjs.js:153) at Service. (index.cjs.js:538) at step (tslib.es6.js:100) at Object.next (tslib.es6.js:81) at fulfilled (tslib.es6.js:71) at ZoneDelegate.invoke (zone-evergreen.js:359) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:855 at ZoneDelegate.invokeTask (zone-evergreen.js:391)

EDIT:
Problem got solved in this source thanks to Doug Stevenson

来源:https://stackoverflow.com/questions/61548399/enabling-cors-in-cloud-functions-for-firebase-ionic-angular-firebase-error

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!