Firebase Functions on Firebase Hosting: 404

Question

I'm trying to call functions from app but it doesn't work and I'm getting the following error from the console:

index.esm.js:402 OPTIONS https://us-central1-undefined.cloudfunctions.net/addMessage 404 () Failed to load https://us-central1-undefined.cloudfunctions.net/addMessage: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://MYWEBADDRESS' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

firebase.json:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "function": "addMessage"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix $RESOURCE_DIR run lint"
    ],
    "source": "functions"
  }
}

index.js

const functions = require('firebase-functions');

const admin = require('firebase-admin');
admin.initializeApp();


exports.addMessage = functions.https.onCall((data, context) => {

    // Message text passed from the client.
    const text = data.text;

        // Checking attribute.
    if (!(typeof text === 'string') || text.length === 0) {
      // Throwing an HttpsError so that the client gets the error details.
      throw new functions.https.HttpsError('invalid-argument', 'The function must be called with ' +
          'one arguments "text" containing the message text to add.');
    }
    // Checking that the user is authenticated.
    if (!context.auth) {
      // Throwing an HttpsError so that the client gets the error details.
      throw new functions.https.HttpsError('failed-precondition', 'The function must be called ' +
          'while authenticated.');
    }

    // Saving the new message to the Realtime Database.
    return admin.database().ref('/messages').push({
      text: text
    }).then(() => {
      console.log('New Message written');
      // Returning the sanitized message to the client.
      return { text: sanitizedMessage };
    }).catch((error) => {
    // Re-throwing the error as an HttpsError so that the client gets the error details.
    throw new functions.https.HttpsError('unknown', error.message, error);
  });
});

my script in index.html

var addMessage = firebase.functions().httpsCallable('addMessage');
addMessage({text: "messageText"}).then(function(result) {
     var message = result.data.text;
     console.log(message);
});

How I initialize Firebase:

  <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-functions.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "**",
        authDomain: "***",
        databaseURL: "***",
        storageBucket: "***",
      };
      firebase.initializeApp(config);
      var functions = firebase.functions();
    </script>

Read

Is https://us-central1-undefined.cloudfunctions.net/addMessag the actual URL in the error message or did you replace something with undefined? – Rossetti

Yes it is the actual URL – Read

How are you initializing the Firebase SDK in the web client? – Purusha

And also, what versions of each SDK are you using, both client and server? – Purusha

@doug I edited my question by adding the initializing code. By the way, I also use Realtime Database and I don't have a problem with it. I use 5.0.4 on the client. What server? I don't have a server. My Firebase CLI version is 3.18.5. – Read

Server is Cloud Functions, and the SDK is the firebase-functions module. You should not be seeing "undefined" in your URL. It should be your project ID instead. – Purusha

Answer 1

I was having the same exact problem, found your question without an answer, but managed to figure it out in the end.

As @Doug Stevenson mentioned above in the comments, the problem is that the Cloud Functions URL you are seeing has undefined instead of your project ID as the last piece of the url subdomain.

The reason it is undefined is because your project ID is not part of your initial Firebase config object. Like me, you likely copied and pasted the starter snippet from Firebase for the JS SDK, but you did it before they started including the Project ID as part of it. For some reason, even though the project ID is now needed to construct the cloud functions URL, the SDK doesn't error / warn if you don't include it.

All you need to do is add the following field to your config object:

projectId: <YOUR_PROJECT_ID_HERE>

Then you should see the requests no longer 404.

Clevelandclevenger

Hero! was stuck on this for so long. <3 – Sadfaced

will appreciate if you can help me with a similar case https://mcmap.net/q/1469370/-firebase-functions-return-404/6674369 – Aguste

i know comments aren't meant for this type of stuff, but bless your soul sir <3 – Meanie

Answer 2

For anyone else stumbling upon this question who runs into the same error even though the projectId is already set: if you happen to use Express.js for your functions, check out this Github issue and this StackOverflow comment.

To summarize them: make sure that you include the full URI of your function when setting it up with express. For example, if your function runs under https://us-central1.your-project-id.cloudfunctions.net/api/addMessage, make sure you include the api/ part as well. So, in this example that would be:

app.post('/api/addMessage', addMessage);

Collagen