500 Error from Lambda POST function in React App

[justuswitmer]

Hello!

I have a Netlify site at www.icecontractormn.com. I am a Netlify newbie and a relatively new dev, so I suspect I am missing something basic.

I am trying to build a function that will take data from a form I built and then send it to a third party CMS. The POST I am making keeps throwing a 500 error and I can’t for the life of me figure out what the cause is.

Here is my client side code:

    axios({
      data: JSON.stringify({
        "customer": {
          "customer_first_name": "John",
          "customer_last_name": "Doe",
          "customer_email": "johndoe@zuper.com",
          "customer_category": "5f1a48d11289d5e82e798167"
        }
      }),
      method: 'POST',
      url: '/.netlify/functions/addCustomer',
    }).then(response => {
      console.log('response.json();', response.json());
      response.json();
    });

And here is my function:

const axios = require("axios");

exports.handler = async function (event, context) {

  // Only allow POST
  if (event.httpMethod !== "POST") {
    return { statusCode: 405, body: "Method Not Allowed" };
  }

  console.log('hit my netlify event.body', event.body);
  return axios({
    method: "POST",
    url: "https://staging.zuperpro.com/api/customers",
    headers: {
      "content-type": "application/json",
      "x-api-key": process.env.ZUPERPRO,
    },
    data: JSON.stringify(event.body),
  }).then((response) => {
    console.log("success", response);
    return {
      statusCode: 200,
      body: JSON.stringify(response)
    }
  }).catch((e) => {
    console.log('got an error', e.message);
    return {
      statusCode: 500,
      body: JSON.stringify({
        error: e.message
      })
    }
  });
};

Finally, here are the errors I am seeing.

From the browser:

And from my terminal:

Oh, and while my site is in production this code is still only local.

Any help is appreciated!

Thank you!

[marcus]

Hey!

It looks like the server you’re calling from your Netlify function is returning the 500 error and the function is just passing it on. Otherwise you wouldn’t see the got an error log line.

I suspect this to be the issue:

@justuswitmer

    data: JSON.stringify(event.body),

The event.body parameter is already a string, since there is no logic to automatically parse JSON inside of it. Your code will quote it a second time. To debug this, consider logging JSON.stringify(event.body).

The fix likely is to remove the JSON.stringify and pass the event body directly.

Security advice

Be careful! Implementing this kind of code will allow anybody to use your function to post to your API, since you’re always injecting the API key. This leaves a lot of room for abuse.

Consider doing one of the following:

• Implement user authentication in your frontend and check in your function that a valid user called your function. You can use Netlify Identity and the user context in a function for that
• At least validate the incoming request to make sure the data being passed on is valid in the context that you want to allow