React axios Error: Request aborted for delete request in Firefox but not in Chrome

Question

I have been having trouble with my delete requests not working in Firefox with only info given is "error Request aborted". All other requests are working fine but on Firefox, the delete request is not working. I tested it on chrome and it works fine.

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

  const Buyer = props => (
    <tr>
      <td>{props.buyer.firstName} {props.buyer.lastName}</td>
      <td>
        <Link to={"/buyeredit/"+props.buyer._id}>edit</Link> | <a href="/buyer" onClick={() => { props.deletebuyer(props.buyer._id) }}>delete</a>
      </td>
    </tr>
  )

  export default class BuyerList extends Component {

    constructor(props) {
      super(props);  
      this.deletebuyer = this.deletebuyer.bind(this);  
      this.state = {buyers: []};
    }

    componentDidMount() {
      axios.get('http://localhost:5000/buyer/')
       .then(response => {
         this.setState({ buyers: response.data });
       })
       .catch((error) => {
          console.log(error);
       })
    }

    deletebuyer(id) {
      axios.delete('http://localhost:5000/buyer/'+id)
        .then(res => console.log(res.data))
        .catch(err => console.log("Oops, there was an error with deleteing please fix this asap, thx only works in chrome for some reason :"+err));  
        this.setState({
        buyers: this.state.buyers.filter(el => el._id !== id)
      });
    }

    buyerList() {
      return this.state.buyers.map(currentbuyer => {
        return <Buyer buyer={currentbuyer} deletebuyer={this.deletebuyer} key={currentbuyer._id}/>;
      })
    }

Edit: I have also tested the request in postman and it works perfectly.

Hanway

Youssef, Have you ever tried to test the Delete API in postman or by using curl? If yes, please attach the screenshot or let me know the result whether it works or not. – Vtarj

I have also tested the request in postman and it works perfectly. – Hanway

Answer 1

I ran into a similar issue recently. Turns out it was due to having a <button type="submit"> that was triggering that axios request. Changing the button to <button type="button"> fixed the issue for me.

Colunga

It happened to me as well, and this answer is correct. And I am wondering why it happened – Underplay

Would like to figure out what causes this issue as well. It looks like you have to specify that the type=button. Leaving it out still resulted in an error – Decease

A HUGE "THANK YOU!" shout-out to @Charles Brandt for this workaround. I was having a very longish bug hunting session, and after I found Charles answer it turned out that changing "submit" to "button" fixed things also for me. With "submit" Axios would simply just not fire the request. I still have no clue why Axios does this, and how Axios can find out which button triggered the GET call. Even stranger, it worked for months where the button used "submit". Very strange. – Jarman

How do you deal with the issue when the problem is similar to the OP's, who is not using a button but a link with an onClick handler? – Flatus

Answer 2

It has something do to with how React deals with the submit handling function.

I've been taught to add this line to very top of the submit handling function:

submitHandler = (e) => {
    e.preventDefault();


    // Rest of your function
}

Mcvay

Answer 3

There is also this

onSubmit={e => {
 e.preventDefault()
 handleSubmit(onSubmit)()
}}

Which you can try in submit handler even with <button type="submit">

Ringent