Why aren't my Netlify Functions finding a body?

Support
, , ,
#1

When I submit a fetch in from my Next.js app in local development using netlify dev, the Netlify Function runs but the body in the event is always undefined. I expect it to be { url: "websiteUrl" }

Here’s the fetch from my app:

const response = await fetch(
        `/.netlify/functions/createDemoData-background`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ url: "websiteUrl" }),
        }
      );

Here’s the Netlify function, named: createDemoData-background.ts

import { HandlerEvent, HandlerContext } from "@netlify/functions";

const handler = async (event: HandlerEvent, context: HandlerContext) => {
  console.log(event); // this is showing correctly
  console.log("eventbody is", event.body); // this is undefined
  return;
};

export { handler };

Here’s what the console outputs when the function fires:

Response with status 202 in 1 ms.
{
  path: '/.netlify/functions/createDemoData-background',
  httpMethod: 'POST',
  queryStringParameters: {},
  multiValueQueryStringParameters: {},
  headers: {
    'transfer-encoding': 'chunked',
    host: 'localhost:8888',
    'x-deno-pass': 'passthrough',
    'x-nf-request-id': 'ed751452-2180-43a6-93eb-2299412f7a84',
    'x-nf-geo': '{"city":"Somerville","country":{"code":"US","name":"United States"},"subdivision":{"code":"MA","name":"Massachusetts"}}',
    'x-forwarded-for': '::1',
    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'sec-fetch-dest': 'empty',
    'sec-ch-ua-platform': '"macOS"',
    'sec-ch-ua-mobile': '?0',
    'sec-ch-ua': '"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"',
    referer: 'http://localhost:8888/',
    origin: 'http://localhost:8888',
    'content-type': 'application/json',
    connection: 'close',
    'accept-language': 'en-US,en;q=0.9',
    'accept-encoding': 'gzip, deflate, br',
    accept: '*/*',
    'client-ip': '::1'
  },
  multiValueHeaders: {
    'transfer-encoding': [ 'chunked' ],
    host: [ 'localhost:8888' ],
    'x-deno-pass': [ 'passthrough' ],
    'x-nf-request-id': [ 'ed751452-2180-43a6-93eb-2299412f7a84' ],
    'x-nf-geo': [
      '{"city":"Somerville","country":{"code":"US","name":"United States"},"subdivision":{"code":"MA","name":"Massachusetts"}}'
    ],
    'x-forwarded-for': [ '::1' ],
    'user-agent': [
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
    ],
    'sec-fetch-site': [ 'same-origin' ],
    'sec-fetch-mode': [ 'cors' ],
    'sec-fetch-dest': [ 'empty' ],
    'sec-ch-ua-platform': [ '"macOS"' ],
    'sec-ch-ua-mobile': [ '?0' ],
    'sec-ch-ua': [
      '"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"'
    ],
    referer: [ 'http://localhost:8888/' ],
    origin: [ 'http://localhost:8888' ],
    'content-type': [ 'application/json' ],
    connection: [ 'close' ],
    'accept-language': [ 'en-US,en;q=0.9' ],
    'accept-encoding': [ 'gzip, deflate, br' ],
    accept: [ '*/*' ],
    'client-ip': [ '::1' ]
  },
  body: undefined,
  isBase64Encoded: false,
  rawUrl: 'http://localhost:8888/.netlify/functions/createDemoData-background',
  rawQuery: ''
}
eventbody is undefined
#2

Hello @mikec ,

Where are you calling the code above from in your next.js application (Clientside in a useEffect hook that’s if you are using functional components or Backend in an api route)?

#3

Hi @clarnx ! I am calling it client side in a functional component

#4

Hi @mikec, thanks for the feedback.
It’s possible there might be some cors issues hence the fetch request is not sending the body.

I want to find out if you are running the Next.js and Background functions on the same or different server port number on your local dev environment?
Also what’s the host for the Next.js application and the Background function?

#6

Hi @clarnx it ended up being able to read the body once I deployed the function - just wasn’t working on my local dev environment at localhost:8888 from netlify dev. Deploying the function to netlify solved it :slight_smile:

2 Likes