I have this fetch where I'm trying to post a form in MongoDB.

When I fill the form I get this back: SyntaxError: Unexpected end of input at ContactRequest.js:3:1

And I don't know why, because the fetch receives the data from the form and testing the endpoint in postman it works perfectly.

The fetch should works because I used the same Fetch in other projects.

This is the fetch component.

const contactRequest = (params) => {
  console.log(`Test ${JSON.stringify(params)}`);
  fetch(`http://localhost:4000/contact`, {
      method: "POST",
      body: JSON.stringify(params),
      mode: "no-cors",
      headers: {
        'Content-Type': 'application/json'
      }})
      .then(res => res.json())
      .catch((e) => console.error(e));
};


export default contactRequest; 

This is the form component:

import React, {useState} from 'react';
import contactRequest from '../Request/ContactRequest';
import './Contact.css';

const initialState = {
    nameAndSurname: "",
    email: "", 
    phoneNumber: "",
    message: "",
};

const Contact = () => {

    const [contactData, setContactData] = useState(initialState);

    const handlerInput = (e) => {
        setContactData({
            ...contactData,
            [e.target.name] : e.target.value
        });
    };

    const handlerSubmit = (e) => {
        e.preventDefault();
        setContactData(initialState);
        contactRequest(contactData);
        alert("Hemos recibido tu mensaje.");
    }

    return (
            <div>
                <form onSubmit={handlerSubmit}>
                    <label className="nameAndSurname-label">
                        Nombre y Apellido: <br/>
                        <input 
                            id="nameAndSurname"
                            type="text" 
                            name="nameAndSurname" 
                            placeholder="Ingrese su nombre y apellido"
                            onChange={handlerInput}
                            value={contactData.nameAndSurname}
                            required/> <br/>
                    </label>
                    <div className="email-phoneNumber-div">
                    <label>
                        Email: <br/>
                        <input
                            id="email" 
                            type="email" 
                            name="email" 
                            placeholder="Ingrese su email"
                            onChange={handlerInput}
                            value={contactData.email}
                            required/> <br/>
                    </label>
                    <label>
                        Numero de teléfono: <br/>
                        <input 
                            id="phoneNumber"
                            type="number" 
                            name="phoneNumber" 
                            placeholder="Ingrese su numero de teléfono"
                            onChange={handlerInput}
                            value={contactData.phoneNumber}
                            required/> <br/>
                    </label>
                    </div>
                    <label>
                        Mensaje: <br/>
                        <input 
                            id="message"
                            type="text" 
                            name="message" 
                            placeholder="Ingrese su mensaje"
                            onChange={handlerInput}
                            value={contactData.message}
                            required/> <br/>
                    </label>
                    <label>
                        Al enviar este formulario, acepto los terminos y condiciones.
                    </label>
                    <button
                        id="submit-btn"
                        type="submit" 
                        value="Submit">Enviar</button>
                </form>
            </div>
        </div>
    )
}

export default Contact;

This is the Endpoint.

const express = require('express');
const router = express.Router();
const Contact = require('../models/Contact.js');

router.post('/contact', (req, res) => {
  console.log(req.body);
  console.log(req.text);
  let contact = new Contact()
  contact.nameAndSurname = req.body.nameAndSurname
  contact.email = req.body.email
  contact.phoneNumber = req.body.phoneNumber
  contact.message = req.body.message
  
  contact.save((err, contactStored) => {
    if(err) {
      res.status(500).send({message: `Error ${err}`})
    }else {
      res.status(200).send({contact: contactStored})
    }
  })
})


module.exports = router;

CodePudding user response：

Why are you using mode: "no-cors"? This results in an "opaque" response, without body, so without anything to convert to json