title: Error 204: No Content error in Headers column of Network
body: <p>Here is my frontend code:</p>
  <pre><code>import React, { useState, useEffect} from &quot;react&quot;;
  import Navbar from &quot;../Navbar/Navbar&quot;;
  import Axios from &quot;axios&quot;; //axios library to make requests to api
  import &quot;./Stats.css&quot;;
  import ReactPaginate from &quot;react-paginate&quot;;
  
  
  
  
  function Stats() {
    const [customerList, setCustomerList] = useState([]); //store all that information of the database in a list
    //make an axios request to get information from database
    useEffect(() =&gt; {
      Axios.get(&quot;http://localhost:3001/customers&quot;).then((response) =&gt; {
        console.log(response.data);
        setCustomerList(response.data);
      });
    }, []); 
  
    const updateCustomerContacted = (id) =&gt; {
      Axios.put(&quot;http://localhost:3001/update&quot;, {contacted: newContacted, id: id}).then((response) =&gt; {
        alert(&quot;Contacted column updated&quot;);
      })
    };
      
    
  
    //pagination
    const [pageNumber, setPageNumber] = useState(0);
    const customersPerPage = 5 //change this number according to desired number of rows in a page
    const pagesVisited = pageNumber * customersPerPage;
    const displayCustomers = customerList
      .slice(pagesVisited, pagesVisited+customersPerPage)
      .map((val, key ) =&gt; {
        const dateStr = new Date(val.latest_time_of_visit).toLocaleDateString('en-CA');
        const timeStr = new Date(val.latest_time_of_visit).toLocaleTimeString();
        const dateTime = `${dateStr} ${timeStr}`;
        return (
          &lt;tr&gt;
            &lt;td&gt;{val.ID}&lt;/td&gt;
            &lt;td&gt;{val.name}&lt;/td&gt;
            &lt;td&gt;{val.email}&lt;/td&gt;
            &lt;td&gt;{val.counts_of_visit}&lt;/td&gt;
            &lt;td&gt;{dateTime}&lt;/td&gt;
            &lt;td&gt;{val.contacted}&lt;/td&gt;
            &lt;div&gt;
            &lt;input type =&quot;text&quot; 
                   placeholder = &quot;Enter Yes/No&quot;
                   onChange={(event) =&gt; {
                     setNewContacted(event.target.value);
                   }}
                   &gt;&lt;/input&gt;
            &lt;button onClick={() =&gt; {updateCustomerContacted(val.id)}}&gt;Edit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/tr&gt;
        );
      })
      //to account for the fact that total number of customers cannot be divided equally among the pages
      const pageCount = Math.ceil(customerList.length / customersPerPage);
      //page change
      const changePage = ({selected}) =&gt; {
        setPageNumber(selected);
      }
  
      //update contacted column
      const [newContacted, setNewContacted] = useState(0);
  
     
    
  
    {/*}
      const [currentTime, setCurrentTime] = useState(1);
    
      useEffect(() =&gt; {
        fetch(&quot;/time&quot;)
          .then((res) =&gt; res.json())
          .then((data) =&gt; {
            setCurrentTime(data.time);
          });
      }, []);
    */}
      
    return (
      &lt;div&gt;
        &lt;Navbar /&gt;
        &lt;div className=&quot;container&quot;&gt;
          {/*}
        &lt;h1&gt;Customer Information&lt;/h1&gt;
    */}
        &lt;/div&gt;
        &lt;table className=&quot;customertable&quot;&gt;
          &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;S/N&lt;/th&gt;
            &lt;th&gt;Customer Name&lt;/th&gt;
            &lt;th&gt;Customer Email&lt;/th&gt;
            &lt;th&gt;Counts of Visit&lt;/th&gt;
            &lt;th&gt;Latest Time of Visit&lt;/th&gt;
            &lt;th&gt;Contacted?&lt;/th&gt;
            &lt;th&gt;Actions&lt;/th&gt;    
                 
  
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          {displayCustomers} 
          &lt;/tbody&gt;
          
        &lt;/table&gt;
        &lt;ReactPaginate 
            previousLabel={&quot;Previous&quot;}
            nextLabel={&quot;Next&quot;}
            pageCount={pageCount}
            onPageChange={changePage}
            containerClassName={&quot;paginationBttns&quot;}
            pageLinkClassName={&quot;paginationNumber&quot;}
            previousLinkClassName={&quot;previousBttn&quot;}
            nextLinkClassName={&quot;nextBttn&quot;}
            disabledClassName={&quot;paginationDisabled&quot;}
            activeClassName={&quot;paginationActive&quot;}
          /&gt;
      &lt;/div&gt;
    );
  }
  
  export default Stats;
  
  </code></pre>
  <p>Here is my backend code</p>
  <pre><code>//set up express server
  const express = require(&quot;express&quot;);
  const app = express();
  //set up sql server
  const mysql = require(&quot;mysql&quot;);
  const cors = require(&quot;cors&quot;);
  
  app.use(cors());
  app.use(express.json());
  //create a variable called db to make your SQL Statements
  const db = mysql.createConnection({
    user: &quot;&quot;,
    host: &quot;&quot;,
    password: &quot;&quot;,
    database: &quot;&quot;,
  });
  
  //GET REQUEST to database to retrieve customers information from database
  app.get(&quot;/customers&quot;, (req, res) =&gt; {
    db.query(&quot;SELECT * FROM customer_info&quot;, (err, result) =&gt; {
      if (err) {
        console.log(err);
      } else {
        res.send(result);
      }
    });
  });
  
  //Update customers
  app.put(&quot;/update&quot;, (req, res) =&gt; {
    const id = req.body.id
    const contacted = req.body.contacted;
    db.query(&quot;UPDATE customer_info SET contacted = ? WHERE ID = ?&quot;, [contacted, id], (err,result) =&gt; {
      if (err) {
        console.log(err)
      } else {
        res.send(result);
      }
  
    });
  })
  
  //check if backend server is running
  app.listen(3001, () =&gt; {
    console.log(&quot;Your server is running on port 3001&quot;);
  });
  
  </code></pre>
  <p>In my front end code in this code block</p>
  <pre><code>  const updateCustomerContacted = (id) =&gt; {
      Axios.put(&quot;http://localhost:3001/update&quot;, {contacted: newContacted, id: id}).then((response) =&gt; {
        alert(&quot;Contacted column updated&quot;);
      })
    };
  </code></pre>
  <p>I managed to get the alert dialog up when the edit button is pressed, but mySQL database does not get updated.
  On checking the network section upon inspection:</p>
  <p>I have a
  Request URL: http://localhost:3001/update
  Request Method: PUT
  Status Code: 200 OK
  with request payload: contacted: &quot;Yes&quot;</p>
  <p>but another
  Request URL: http://localhost:3001/update
  Request Method: OPTIONS
  Status Code: 204 No Content</p>
  <p>How can I update my database?</p>