network error in axios on node.js request

Question

I have this:

      class ServicesPage extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        bookID: '',
        bookTitle: '',
        bookAuthor: '',
      };
    }
  
    handleInputChange = e => {
      this.setState({
        [e.target.name]: e.target.value,
      });
    };
  
    handleSubmit = e => {
      e.preventDefault();
  
      const { siteLocation, Services, date, cnum } = this.state;
  
      const selections = {
        siteLocation,
        Services,
        date,
        cnum,
      };
  
      axios
          .post('http://localhost:3001/updateServices', selections)
          .then(() =>
                  console.log("updating"),
                  window.location = "/services"
          )
          .catch(function(error) {
              console.log(error)
              window.location = "/"
          })
    };
  
  

    render() {
    return (
        <div className="App">
           <div id="form-main">
            <div id="form-div">
            <form onSubmit={this.handleSubmit} className="form">
                  
                <select name="siteLocation" id="siteLocation" onChange={this.handleInputChange} >
                    <option value="ottawa">ottawa</option>
                    <option value="markham">markham</option>
                </select>

                <p class="email">
                    <input name="Services" type="text" class="validate[required,custom[email]] feedback-input" id="Services" placeholder="Services" onChange={this.handleInputChange} />
                </p>
                
               <input type="hidden" name="date" value={Date().toLocaleString()} onChange={this.handleInputChange} />
                    
               <p class="cnum">
                    <input name="cnum" type="text" class="validate[required,custom[email]] feedback-input" id="cnum" placeholder="cnum" onChange={this.handleInputChange} />
                </p>
                
                
                
                <div class="submit">
                    <input type="submit" value="SEND" id="button-blue"/>
                    <div class="ease"></div>
                </div>
                </form>
            </div>
        </div>
        </div>
    );
    }
}

export default ServicesPage;

As you can see, I am updating the state when a field is edited, and then sending it to the backend through the axios call. and then in my backend,

  app.post('/updateServices', (req, res) => {
   console.log(req.body.Services)
})

when I press submit, and try to run the axios call, it gives me this error in my console:

Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:84)

I am not sure why this is happening. any ideas? I have cors installed backend, and everything is configured properly, but I can't seem to submit.

Answer 1

You should send something in response to your API, like so.

  app.post('/updateServices', (req, res) => {
   console.log(req.body.Services)
   res.send({message: "success"})
})

otherwise, your request is not resolved and you will not get anything on the frontend.