Cloud Function Firebase request.body is undefined

Question

User side: POST method using fetch function:

let response = await fetch(url, {
  "method": "POST",
  "headers": {
    "Content-Type": "application/json"
  },
  "body": JSON.stringify({"stripeToken": token.id})
});

Server side: URL to fetch is a Firebase Cloud Function:

const functions = require('firebase-functions');
const cors = require('cors')({origin: true});
const stripe = require("stripe")("PRIVATE_KEY");

exports.chargeStripe = functions.https.onRequest( async (request, response) => {

    // Getting token
    let token = request.body.stripeToken;

    // Creating charge
    let charge = await stripe.charges.create({
        amount: 99,
        currency: 'eur',
        description: 'Payment',
        source: token
    });

    // Sending response
    charge ? send(response, 200, {message: 'Success'}) : send(response, 500, {message: 'Error!'});

});

The problem is that I am getting console.log(token) → 'undefined'.

Update 1

It seems that Chrome (browser) is blocking the fetch function (CORS policy). If I test the end-point via Insomnia, everything is working fine.

So, someone knows what to do in this case?

Update 2

Thanks to Doug Stevenson, I added CORS middleware inside the function:

exports.chargeStripe = functions.https.onRequest( (request, response) => {

    // Enable CORS using the `cors` express middleware.
    return cors(request, response, async () => {

        // Reading token
        let token = request.body.stripeToken;

        // Charging user
        let charge = await stripe.charges.create({
            amount: 99,
            currency: 'eur',
            description: 'Payment',
            source: token
        });

        // Sending response 
        response.status(200).send('Ok');
    });

});

Now everything works!

I'm not sure your implementation of cors is correct. The preflight request isn't going to contain the actual post data. See this: https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase — Doug Stevenson, Oct 24 '19 at 12:59
Ok, I edit the question because maybe it can lead to confusion. — Erik Martín Jordán, Oct 24 '19 at 14:21
It still doesn't look like you're implementing cors properly. All you're doing is importing the library. You need to use it in the function as well. — Doug Stevenson, Oct 24 '19 at 14:25
Thanks a lot for your patience, Doug Stevenson. Updated my question again... — Erik Martín Jordán, Oct 24 '19 at 15:14
If you have the solution to your own problem, you should add it as an answer so the question can be closed with the correct answer accepted. — Doug Stevenson, Oct 24 '19 at 15:45
Done! Thanks again, you made my day! I have been struggling with this for hours... — Erik Martín Jordán, Oct 24 '19 at 17:26

score 3 · Accepted Answer · answered Oct 24 '19 at 17:25

Thanks to Doug Stevenson, I added the cors package:

const cors = require('cors')({origin: true});

And then, I used CORS middleware inside the function. So, the final solution is:

const functions = require('firebase-functions');
const cors = require('cors')({origin: true});
const stripe = require("stripe")("PRIVATE_KEY");

exports.chargeStripe = functions.https.onRequest( (request, response) => {

    // Enable CORS using the `cors` express middleware.
    return cors(request, response, async () => {

        // Reading token
        let token = request.body.stripeToken;

        // Charging user
        let charge = await stripe.charges.create({
            amount: 99,
            currency: 'eur',
            description: 'Payment',
            source: token
        });

        // Sending response 
        response.status(200).send('Ok');
    });

});

Cloud Function Firebase request.body is undefined

Update 1

Update 2

1 Answers1