'Firebase HTTP Function triggered twice when POST request sent with headers

I deployed a firebase HTTP cloud function and am experiencing this (unexpected) behavior:

  • when I call the function (using POST) from a browser environment with fetch(), the function gets triggered twice, one time without any data sent in the body, and another time as I would expect it. In the frontend (chrome network tab) I can only see 1 request, the successfull one.
  • this does only happen with POST requests
  • this does only happen when the request is sending headers

Is this normal behavior that I dont understand or a potential bug?

my minimal cloud function

exports.run = functions.https.onRequest(async (req, res) => {
  // ALLOW CORS FOR POST REQUEST:
  // => https://stackoverflow.com/a/38259193
  res.set('Access-Control-Allow-Origin', '*');
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");

  return res.status(200).send({
    status: "ok",
    body: req.body,
    query: req.query,
  }).end();
});

calling from frontend

// example data (not a real one)
const url = "https://us-central1-myproject.cloudfunctions.net/test";
const postData = { x: 1, y: 2 };

// GET request => ✅ works as expected
fetch(url);

// POST request without headers => ✅ works as expected
fetch(url, {
  method: 'POST',
  body: JSON.stringify(postData),
});

// POST request with headers => ❌ 2 requests get triggered
fetch(url,  {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(postData),
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source