Send a POST request via Axios to a Firebase Cloud Function

Question

I try to send a simple request to a Firebase function, but I get the same error every time... Apparently, the Firebase function does not receive the data I want to transmit from the Axios request.

This is the Firebase function :

[...] // Some imports

exports.completeProfile = functions.https.onRequest((req, res) => {

  // Debug
  console.log(req); 
  console.log(req.body);
  console.log(req.method);
  console.log("Test: " + userId + ", " + profilePicture + ", " + username);

  // We recover the data
  const userId = req.body.userId; // return "undefined"
  const profilePicture = req.body.profilePicture; // return "undefined"
  const username = req.body.username; // return "undefined"

  // we're checking to see if they've been transferred
  if (!userId || !profilePicture || !username) {
    // At least one of the 3 required data is not completed
    console.error("Error level 1: missing data");
    return res.status(400).send("Error: missing data");
  }

  [...] // (We have all the data, we continue the function)

});

And here is my Axios request :

axios
    .post(
        '<FIREBASE CLOUD FUNCTION URL>',
        {
            userId: '12345667',
            profilePicture: 'https://profilepicture.com/url',
            username: 'test',
        }
    )
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.log(error);
    });

When I run the Axios query, I always come across the "Network Error" error. Here is what console.log(error); gives :

And here are the server logs:

How to solve the problem? Thanks for your help.

Answer 1

change your firebase code to this

var cors = require("cors");
completeProfileFn = (req, res) => {
  // Debug
  console.log(req);
  console.log(req.body);
  console.log(req.method);
  console.log("Test: " + userId + ", " + profilePicture + ", " + username);

  // We recover the data
  const userId = req.body.userId; // return "undefined"
  const profilePicture = req.body.profilePicture; // return "undefined"
  const username = req.body.username; // return "undefined"

  // we're checking to see if they've been transferred
  if (!userId || !profilePicture || !username) {
    // At least one of the 3 required data is not completed
    console.error("Error level 1: missing data");
    return res.status(400).send("Error: missing data");
  }

  // (We have all the data, we continue the function)
};

// CORS and Cloud Functions export logic
exports.completeProfile = functions.https.onRequest((req, res) => {
  var corsFn = cors();
  corsFn(req, res, function() {
    completeProfileFn(req, res);
  });
});

It is a CORS issue.