Question 119451 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase Callable Function Emulator configuration not working

I’m adding callable functions to an existing Angular/Firebase project. I’ve used what I believe to be the current configuration standards, but the project is still calling the production endpoints, leading to a cors exception.

configuration:

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    ...
  ],
  imports: [
    ...
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      const auth = getAuth();
      if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://localhost:5005', { disableWarnings: true });
      }
      return auth;
    }),

-- FUNCTIONS CONFIG CODE --

    provideFunctions(() => {
      const functions = getFunctions();
      if (environment.useEmulators) {
        connectFunctionsEmulator(functions, 'localhost', 5001);
      }
      return functions;
    }),

-- FUNCTIONS CONFIG CODE --

    provideFirestore(() => {
      const firestore = getFirestore();
      if (environment.useEmulators) {
        connectFirestoreEmulator(firestore, 'localhost', 5006);
      }
      return firestore;
    }),
    //provideStorage(() => getStorage()),
    provideAnalytics(() => getAnalytics()),
    ...
  ],
  exports: [],
  providers: [...],
  bootstrap: [AppComponent]
})

The emulator is logging:

✔ functions[us-central1-addMessage2]: http function initialized (http://127.0.0.1:5001/{project-name}/us-central1/addMessage2).

The angular call to the endpoint is failing cors with:

Access to fetch at ‘https://us-central1-{project-name}.cloudfunctions.net/addMessage2’ from origin ‘http://localhost:4200’ 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out with this two-part answer:

    Part 1:

    passed getApp() into getFunctions.

        -- FUNCTIONS CONFIG CODE --

    provideFunctions(() => {
      const functions = getFunctions(getApp());  << Notice <<
      if (environment.useEmulators) {
        connectFunctionsEmulator(functions, 'localhost', 5001);
      }
      return functions;
    }),

    -- FUNCTIONS CONFIG CODE --

    Part 2:

    Make sure to inject functions into components as apposed to calling getFunctions.

        constructor(private auth: Auth, private firestore: Firestore, 
        public dialog: MatDialog, private userService: UserService, 
        private func: Functions) {}           << Notice <<

  2. 0

    You can follow this Instructions provided in this Article to Emulating Firebase Cloud Functions in the local environment for that use :

    provideFunctions(() => {
      const functions = getFunctions(getApp());
      if (environment.useEmulators) {
        connectFunctionsEmulator(functions, 'localhost', 5001);
      }
      return functions;
    })

    In that article it is mentioned how to set CORS header also like this :

    export const helloWorld = functions.https.onRequest((request, response) => {
  response.set('Access-Control-Allow-Origin', '*');
  response.send({ message: 'Hello from Firebase emulator!' });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search