在 position 0 的 json 中发送表单时出现错误

Question

I am doing for the first time a contact form through Node with Nodemailer where you send the contact form through the website and it goes straight to your inbox.

So my app.js on the public folder is like this:

const form = document.getElementById('contact-form');

const formEvent = form.addEventListener('submit', event => {
  event.preventDefault();
  let mail = new FormData(form);
  sendMail(mail);
});

const sendMail = mail => {
  fetch('https://coopza-testing.herokuapp.com/send', {
    method: 'post',
    body: mail,
  }).then(response => response.json());
  
};

And on my server.js file is

const express = require('express');
const cors = require('cors');
const nodemailer = require('nodemailer');
const multiparty = require('multiparty');
require('dotenv').config();

const PORT = process.env.PORT || 5000;

// instantiate an express app
const app = express();
// cors
app.use(cors({ origin: '*' }));
app.use(express.static('public'));
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  next();
});


app.use('/public', express.static(`${process.cwd()}/public/index.html`)); // make public static

const transporter = nodemailer.createTransport({
  service: 'smtp.gmail.com',
  port: 587,
  auth: {
    user: process.env.EMAIL,
    pass: process.env.PASS,
  },
});

// verify connection configuration
transporter.verify(function(error, success) {
  if (error) {
    console.log(error);
  } else {
    console.log('Server is ready to take our messages');
  }
});

app.post('/send', (req, res) => {
  let form = new multiparty.Form();
  let data = {};
  
  form.parse(req, function(err, fields) {
    console.log(fields);
    Object.keys(fields).forEach(function(property) {
      data[property] = fields[property].toString();
    });
    console.log(data);
    const mail = {
      sender: `${data.name} <${data.email}>`,
      to: process.env.EMAIL, // receiver email,
      subject: data.subject,
      text: `${data.name} <${data.email}> \n${data.message}`,
    };

    transporter.sendMail(mail, (err, data) => {
      if (err) {
        console.log(err);
        res.status(500).send('Something went wrong.');
      } else {
        res.status(200).send('Email successfully sent to recipient!');
      }
    });
  });
});

// Index page (static HTML)
app.route('/').get(function(req, res) {
  res.sendFile(`${process.cwd()}/public/index.html`);
});

/** ********************************************** */
// Express server listening...
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}...`);
});

When I send the form it comes with the errors:

unexpected token s in json at position 0
POST https://coopza-testing.herokuapp.com/send 500 (Internal Server Error)

I tried in the json, response with

 .then(res => res.text()) // convert to plain text
    .then(text => console.log(text));

But no more info could get from it.

I would be much appreciated some knowledge of yours, please

Answer 1

"unexpected token s in json at position 0" error comes in when you try to parse object which can't be converted to JSON.

for ex:

let str = 'Test string';
console.log(JSON.parse(str)). --> will throw an error.

Just try to console it. Also try to use debugger or console to check till where the code is executing without errors, you can see through it.

let form = new multiparty.Form();
  let data = {};
  console.log(form);
  form.parse(req, function(err, fields) <- this parsing could be a problem

Answer 2

Can you try the following code and see if you get something useful in the console?

app.post('/send', (req, res) => {
  let form = new multiparty.Form();
  let data = {};
  
  form.parse(req, function(err, fields) {
    if (err) {
       console.error('An error has occurred while parsing the form', { err });
    }

    console.log({ fields });
    Object.keys(fields).forEach(function(property) {
      data[property] = fields[property].toString();
    });
    console.log({ data });
    const mail = {
      sender: `${data.name} <${data.email}>`,
      to: process.env.EMAIL, // receiver email,
      subject: data.subject,
      text: `${data.name} <${data.email}> \n${data.message}`,
    };

    // for debugging purpose, check what values `mail` object is having
    console.log({mail});

    // check to see if this is causing the trouble??
    console.log({json: JSON.stringify(mail)});

    transporter.sendMail(mail, (err, data) => {
      if (err) {
        console.error('Error while sending the email', err);
        res.status(500).send('Something went wrong.');
      } else {
        res.status(200).send('Email successfully sent to recipient!');
      }
    });
  });
});

Also, I have a question for you, why are you using the multiparty module for parsing data as json object, can't you use a simple app.use(express.json(options)); ? As you're just using the form to get the JSON value for sending textual data, then you could have used express.json() instead of multiparty.