firebase-tools: Emulated callable function throws cors error

[REQUIRED] Environment info

firebase-tools: >=6.9.0

Platform: macOS

[REQUIRED] Test case

// functions/src/index.ts
import * as functions from 'firebase-functions'
export myCallable = functions.https.onCall((data, ctx) => {
  console.log("I'm inside the function")
  return 'ok'
})

// app/src/firebase.ts
import firebase from 'firebase/app'
import 'firebase/functions'

if (!firebase.apps.length) {
  firebase.initializeApp({})
}

if (process.env.NODE_ENV === 'development') {
  firebase.functions().useFunctionsEmulator('http://localhost:5001')
}

export default firebase

// app/src/page.tsx

import React, { useState, useEffect } from 'react'
import firebase from './firebase'
import Loading from './loading'

const Page: React.FC = function Page() {
  const [loaded, setLoaded] = useState(false)
  async function load() {
    const myCallable = firebase.functions().httpsCallable('myCallable')
    const result = await myCallable()
    setLoaded(true)
  }
  useEffect(() => {
    load()
  }, [])
  return (
    <div className='bg-gray-300'>
      <h1 className='my-8'>Page</h1>
      {loaded ? <div>works</div> : <Loading />}
    </div>
  )
}

export default Page

[REQUIRED] Steps to reproduce

Run firebase serve --only functions with firebase-tools versions 6.9.0 and above

[REQUIRED] Expected behavior

It doesn’t result in error, like 6.8.0 doesn’t.

[REQUIRED] Actual behavior

Access to fetch at 'http://localhost:5001/my-project/us-central1/myCallable'
from origin 'http://localhost:3000' has been blocked by CORS policy: 
Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

index.cjs.js:70 Uncaught (in promise) Error: internal
    at new HttpsErrorImpl (index.cjs.js:70)
    at _errorForResponse (index.cjs.js:191)
    at Service.<anonymous> (index.cjs.js:711)
    at step (tslib.es6.js:194)
    at Object.next (tslib.es6.js:125)
    at fulfilled (tslib.es6.js:78)
HttpsErrorImpl @ index.cjs.js:70

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 28 (10 by maintainers)

Most upvoted comments

@MorenoMdz doh! Thanks! I’ve hit this problem twice now and I keep forgetting the issue is a simple pilot error but hard to detect…

Sometimes I manually switch between two different firebase configurations (prod and dev in my case). My (flutter) app is configured to use the dev firebase project instance with the local emulator. After doing some prod project configuration I forgot to switch back to dev so, for me the fix is simple… don’t forget to switch back to the dev config:

firebase use dev

🤦

@samtstern Perhaps the emulator could remind/warn us of the effective firebase configuration in use when it is started?

+26

ajbarry on Sep 30, 2020

The same thing is happening here, nothing changed, the only thing changed is that I deployed the callable functions to our prod, restarted the machine and now it won’t work locally in the emulator:

Access to fetch at 'http://192.168.0.5:5001/ourappname-dev/us-central1/createQRCode' from origin 'http://localhost:3000' 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.

FIxed, my script to deploy changes the project firebase use project_id and I forgot to change back to the dev I use in the emulator.

+21

MorenoMdz on Sep 17, 2020

I see the original issue is for firebase serve.

But I still have this CORS problem when using firebase emulators:start

+15

qqpann on Jul 26, 2020

Maybe a little late, but if you try to call a non-existing function, you get the same CORS issue.

+13

coeneivan on Nov 18, 2022

Hello there I´m having this issue also

Any definitive solution?

+12

adrielwerlich on May 27, 2019

👍 I just started having this problem today. I was developing yesterday with no issue, no versions have changed that I can see. Multiple branchs I’m sure it was working on is no longer working now either.

Andrew1431 on Aug 1, 2020

Yes I can reproduce this. It only happens when you are signed in which changes the headers that callable functions sends.

samtstern on May 13, 2019

@samtstern I have a very similar issue which occurs on both 6.9.0 as well as 6.10.0.

The sample app is almost identical, however I receive the following error:

Access to fetch at 'http://localhost:5001/myapp/us-central1/myCallable' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
Request header field firebase-instance-id-token is not allowed by 
Access-Control-Allow-Headers in preflight response.

index.cjs.js:59 Uncaught (in promise) Error: internal
    at new HttpsErrorImpl (index.cjs.js:59)
    at _errorForResponse (index.cjs.js:154)
    at Service.<anonymous> (index.cjs.js:526)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at fulfilled (tslib.es6.js:68)

When I manually add the Firebase-Instance-Id-Token string to Access-Control-Allow-Headers in the source, the issue is resolved.

maxkoyubi on May 22, 2019

@cdock1029 figured it out. Fix coming in https://github.com/firebase/firebase-tools/pull/1286

samtstern on May 13, 2019

I had the same issue recently, my problem was because I had two different environments set up (test and production). In my case, emulator was picking up production environment project ID and not test. I had to switch using the command firebase use test (note I already had an alias set up for my test environment). Since I was running my application locally which always pointed to Functions on test environment.

So check on your browser using developer tools under network tab if the HTTP request network path to the Functions is correct. In my case, it didn’t match the path under the emulators Functions logs.

haydar9 on Oct 17, 2021

I just did the same thing and it took me a while to find this. If you look here: http://localhost:4000/logs You can see the paths of the functions that are deployed locally. Check these match what you expect and what you are getting in your CORS error.

madmacc on May 11, 2021

I also have this issue. However, for me it’s not only the emulator, but also the deployed functions after I changed the region.

ciriousjoker on Sep 13, 2019

Got a better fix for this in #1335

samtstern on May 23, 2019

@fngrl thanks for letting me know. Clearly I don’t quite understand the behavior of Functions in prod with respect to CORS. I tried to model the emulator based on what I saw with a production callable … Let me talk to someone who worked on the backend team and make sure we get this right once and for all.

samtstern on May 23, 2019