ReactJS axios POST call to PHP - Request Aborted error

Question

I am trying to make a POST call to a PHP file with axios.

 loginHandler = () => {

    var params = new URLSearchParams();
    params.append('User', this.state.inputUsername);
    params.append('Pwd', this.state.inputPassword);

    var callAction =  process.env.REACT_APP_API_ENDPOINT + 'LoginHandler.php';

    axios.post(callAction, params)
    .then(res => {
        const message = res.data;
        console.log(message);
    })
    .catch(function (error) {
        // handle error
        console.log(error);
      })
  }

But everything I try seems to give me a "Request aborted" error. However, doing axios requests from any other component except the LoginForm component seems to work.

Is there anything wrong with my axios call? I just copy/pasted it from a component that works, and it has no issues there.

Have you tried putting params in json axios.post(callAction, { User: this.state.inputUsername, Pwd: this.state.inputPassword }) — Yatin Gaikwad
– Yatin Gaikwad, Commented Apr 8, 2020 at 14:57
@YatinGaikwad yes, I tried, and I am getting the same error. Think posting the entire file would help? — Răzvan T.
– Răzvan T., Commented Apr 8, 2020 at 14:59

Răzvan T. · Accepted Answer · 2020-04-08 15:18:00Z

3

The method was called on the "Submit" button onClick, which forced the page to reload before the request was completed.

Moving it to the form

 <form onSubmit ={(event) => this.loginHandler(event)} >

and adding event as parameter on loginHandler, and this line of code

event.preventDefault();

got it working eventually.

answered Apr 8, 2020 at 15:18

Răzvan T.

3604 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS axios POST call to PHP - Request Aborted error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related