Cloud Functions for Firebase - Cannot load URL: No 'Access-Control-Allow-Origin' header is present

Question

I have an angular 2 app where I'm calling a Firebase via an http request. However, anytime, I try to run the function, I'm getting this error:

XMLHttpRequest cannot load https://us-central1-<my-projectId>.cloudfunctions.net/[email protected]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 500.
    error_handler.js:54 EXCEPTION: Response with status: 0  for URL: null
    ErrorHandler.handleError @ error_handler.js:54
    next @ application_ref.js:348
    schedulerFn @ async.js:93
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:234
    SafeSubscriber.next @ Subscriber.js:183
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:79
    NgZone.triggerError @ ng_zone.js:333
    onHandleError @ ng_zone.js:294
    ZoneDelegate.handleError @ zone.js:338
    Zone.runTask @ zone.js:169
    ZoneTask.invoke @ zone.js:420
    Subscriber.js:238 Uncaught Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}

Here is my Cloud Function for Firebase index.js file:

   const functions = require('firebase-functions');
    const admin = require('firebase-admin');
    admin.initializeApp(functions.config().firebase);
    const cors = require('cors')({origin: true});

    /**
     *  Function to get a user by email
     */
    exports.getUserByEmail = functions.https.onRequest((req, res) => {
      cors(request, response, () => {

// This should return a promise from the getUserByEmail function
response.status(200).send(admin.auth().getUserByEmail(req.query.email))
       })
    });

And then here's how I'm calling the function in a component (assuming the HTTP request is made successfully):

this.http.get('https://us-central1-rosebud-9b0ed.cloudfunctions.net/getUserByEmail', {
       search: "[email protected]"
     }).subscribe(data => {
       console.log('data', data);
     })

It would seem that no matter what I try, I keep hitting this same issue. I've even tried deploying this to my firebase hosted URL and it still gives me this error. Anyone know what I can do here?

Thanks in advance!

Answer 1

So I made a few key mistakes here.

1. Make sure to require cors before you initialize the Firebase app.
2. Make sure that the parameters march the cors() function.

Here is the updated index.js code:

  const functions = require('firebase-functions');
    const admin = require('firebase-admin');
    const cors = require('cors')({origin: true});
    admin.initializeApp(functions.config().firebase);


    /**
     *  Function to get a user by email
     */
    exports.getUserByEmail = functions.https.onRequest((request, response) => {
      cors(request, response, () => {

// This should return a promise from the getUserByEmail function
response.status(200).send(admin.auth().getUserByEmail(req.query.email))
       })
    });