405 - Uncaught (in promise) Error: Request failed with status code 405-CodePudding

I’m getting this error, when I’m trying to delete from my database:

DELETE https://localhost:44366/api/products/ 405

Uncaught (in promise) Error: Request failed with status code 405

I’m able to delete with Postman. My Get, and Put works

I use:

Azure DB

React

ASP.NET Core API

MSSQL

React: DbProvider.js:

   deleteProduct: async (id) => {
          let response = await axios.delete(this.state.baseApi   `/products/`   id)
          return response.data;
        }

EditorProducts.js:

  const EditorProducts = () => {
  const [products, setProducts] = useState();
  const [refresh, setRefresh] = useState(false);
  const context = useContext(DbContext);

  useEffect(() => {
    context.getPopular().then((x) => setProducts(x));
  }, [refresh]);

  const handleDelete = useCallback(async (event) => {
event.persist();

await confirm().then((response) => {
  if (response) {
  
    context.deleteProduct(event.target.id).then(() => setRefresh(true));
  }
});
});

return (
    <>
      <table className="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Title</th>
            <th scope="col">Image</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          {products != null
            ? products.map((product) => (
                <tr key={product.id}>
                    <th scope="row">{product.id}</th>
                    <td>{product.title}</td>
                    <td>{product.image}</td>
                    <td>
                      <Link to={`/editor/service/${product.id}`}>
                        <FaEdit style={iconStyle} />
                      </Link>
                      <a to="#" id={product.id} onClick={handleDelete}>
                        <FaTrash style={iconStyle} />
                      </a>
                    </td>
                </tr>
              ))
            : "Loading"}
        </tbody>
      </table>
    </>
  );
};

ProductsController.cs

   // DELETE: api/Products/5
        [HttpDelete("{id}")]
        public async Task<ActionResult<Product>> DeleteProduct(int id)
        {
            var product = await _context.Products.FindAsync(id);
            if (product == null)
            {
                return NotFound();
            }

            _context.Products.Remove(product);
            await _context.SaveChangesAsync();

            return product;
        }

        private bool ProductExists(int id)
        {
            return _context.Products.Any(e => e.Id == id);
        }

CodePudding user response：

The question seems to be a duplicate of this. Here is the accepted answer from Raphael Rafatpanah

The HTTP 405 error means that the server does not allow the HTTP request method that the client sent. https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405 The HTTP method you're using in the code example you shared is POST. Therefore, it seems that your server does not accept POST requests.

In order to fix this, either change the request method to something that is supported, or change the server to allow POST requests.

CodePudding user response：

just change the route to this and remove return product since it would be deleted already

[Route("{id}")]
public async Task<ActionResult> DeleteProduct(int id)
  var product = await _context.Products.FindAsync(id);
            if (product == null)
            {
                return NotFound();
            }

            _context.Products.Remove(product);
           var result = await _context.SaveChangesAsync();

           if (result ==0) return BadRequest();
           return Ok();
        }

and javascript

 let response = await axios.delete(this.state.baseApi   `/products/deleteproduct/`   id)