问题
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