Axios delete method

Question

I am trying to delete the user by hitting an delete api(mysql+node). But somehow i am getting an error saying the BAD REQUEST.
Error: DELETE http://localhost:7003/api/remove/2 404 (Not Found) Please refer below index.js and react(Home.js)

Home.js:

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";

const Home = () => {
  const [data, setData] = useState([]);
  const loadData = async () => {
    const response = await axios.get("http://localhost:7003/api/get");
    setData(response.data);
  };

  const deleteUser = (id) => {
    console.log("clicked");

    axios.delete(`http://localhost:7003/api/remove/${id}`);
    loadData();
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <div className="table-container">
      <Link to={"/add"}>
        <button>ADD USER</button>
      </Link>
      <table className="styled-table">
        <thead>
          <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Location</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => {
            return (
              <tr key={item.id}>
                <th>{index + 1}</th>
                <td>{item.name}</td>
                <td>{item.location}</td>
                <td>{item.amount}</td>
                <td>
                  <Link to={`/update/${item.id}`}>
                    <button>Edit</button>
                  </Link>
                  <button
                    onClick={() => {
                      deleteUser(item.id);
                    }}
                  >
                    Delete
                  </button>
                  <Link to={`/view/${item.id}`}>
                    <button>Edit</button>
                  </Link>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default Home;

`

Index.js:

const express = require("express");
const app = express();
const cors = require("cors");
const bodyParser = require("body-parser");
const mysql = require("mysql2");

const db = mysql.createPool({
  host: "localhost",
  user: "root",
  password: "root",
  database: "crud_contact",
});

app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.listen(7003, () => {
  console.log("Server is up and running @7003");
});

// app.get("/api/get",(req,res)=>{
//     const sqlQuery ="insert into customer (name,location,amount) values ('Aditya','USA',500000)";
//     db.query(sqlQuery,(error,result)=>{
//         if(error){
//             console.log(error)
//         }
//         res.send(result)
//     });
// })

app.get("/api/get", (req, res) => {
  const sqlQuery = "select * from customer";
  db.query(sqlQuery, (error, result) => {
    if (error) {
      console.log(error);
    }
    res.send(result);
  });
});

app.post("api/post", (req, res) => {
  const { name, location, amount } = req.body;
  const sqlInsertQuery =
    "insert into customer (name,location,amount) values (?,?,?)";
  db.query(sqlInsertQuery, [name, location, amount], (error, result) => {
    if (error) {
      console.log(error);
    }
  });
});

app.delete("api/remove/:id", (req, res) => {
  const { id } = req.params;
  const deleteQuery = "delete from customer where id = ?";
  db.query(deleteQuery, [id], (error, result) => {
    if (error) {
      console.log(error);
    }
  });
});`

It will be great help if you could help me find where esactly I am going wrong.

Answer 1

But somehow i am getting an error saying the BAD REQUEST.

Not according to the error you're showing us:

Error: DELETE http://localhost:7003/api/remove/2 404 (Not Found)

"Not Found" isn't a "Bad Request" response, it's a "Not Found" response. Which means the resource doesn't exist on the server. At a glance, I see a difference here:

// this is found:
app.get("/api/get", (req, res) => {

// this is not found:
app.delete("api/remove/:id", (req, res) => {

The post and delete operations appear to be missing the initial / in the URL. So the endpoints are being created, but not at the URL you expect. Add the / to match the get operation.