angularfire: Calling AngularFireFunctions.httpsCallable results to error 404 because

Version info

Angular: 6.0

Firebase: 5.5.5

AngularFire: 5.1.0

How to reproduce these conditions

I created a service that aims to generate token from 3rd party service and used AngularFireFunctions to call a cloud function.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AngularFireFunctions } from '@angular/fire/functions';

import { CreditCard } from '@core/models';

@Injectable()
export class MagpieTokenService {
  private _generateToken;
  
  constructor(
    private http: HttpClient,
    private cloudFunctions: AngularFireFunctions
  ) { }

  generate(creditCard: CreditCard): Observable<any> {
    return this.generateToken(creditCard.generateFormValue())
  }

  protected get generateToken() {
    if(this._generateToken == null)
      this._generateToken = this.cloudFunctions.httpsCallable('generateToken');
    return this._generateToken;
  }
}

Now when I try to use the service in my component, error 404 was raised and I noticed that it called https://null-rik-app.cloudfunctions.net/generateToken.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 19 (2 by maintainers)

Most upvoted comments

The issue seems to come from #1920 (this file) resolving #1874.

To get around it for now, you can do this in your app.module.ts:

providers: [
  { provide: FunctionsRegionToken, useValue: 'us-central1' }
]

+25

achendrick on Oct 25, 2018

Are you not getting CORS errors? I do, while localhost is added in the authorised domain list in the firebase console.

I’m testing an Ionic 3 app local (localhost:8100)

alberthoekstra on Nov 5, 2018

The issue seems to come from #1920 (this file) resolving #1874.

To get around it for now, you can do this in your app.module.ts:
providers: [
  { provide: FunctionsRegionToken, useValue: 'us-central1' }
]

for latest version which compatible with angular 8

providers: [
   { provide: FUNCTIONS_ORIGIN, useValue: 'http://localhost:5005' }
  ]

import : [
AngularFireFunctionsModule
]

mohamedaboelmagd on Jun 25, 2019

Sorry, I mean with the client side. My firebase functions is deployed and works well, but I’m searching how to call it from my application with angularfire2: this.fns.httpsCallable('createNewUser')({ email: email, password: password }) .subscribe(res => { console.log('add user', res); });

From the chrometools I see my request has been send with “OPTIONS” method and return status 400. I’m not familiar with CORS, I’m reading docs about this but if you have any clue …

EDIT: My problem was cors misunderstood. Your previous comment helped me. Thank you.

M-Blobby on Dec 11, 2018

Sure no problem ! In my case the problem wasnt in the frontend code but in the functions code.

Check this example of Firebase where they created one function that return a CORS response.

In my case I added the CORS package. Then I added this code at the top of the code:

const cors = require('cors')({ origin: true });

Then wrapped the original response in this code.

return cors(req, res, () => {
 // enter existing code here
 });

Hopefully this makes any sense 😃

alberthoekstra on Dec 11, 2018