0

I want to make an post request to my BackEnd ASP.NET Core Web API from my React JS FrontEnd but when using @axios@ it is not triggered.

I followed some instructions from the internet regarding making an axios get/post request but it seemed not to work

handleRegistration = (event) => {
    event.preventDefault();

    const user = {
        email: this.state.email,
        firstName: this.state.firstName,
        lastName: this.state.lastName,
        password: this.state.password
    };

    axios.post('http://localhost:{somenumbershere}/api/values', { user })
        .then(res => {
            console.log(res);
            console.log(res.data);
        })
}

I am creating a user and want to send him as an object to my Action method to the BackEnd but it never hits the breakpoint. As you see the url I am sending my obj to, the @api/values/5@ is an example route for sending to the backend actiom method. I have decorated the Action with HttpPost, but still nothing.

4
  • what is your backend endpoint... this url not valid? Apr 22, 2019 at 12:31
  • This is the endpoint specified in the action method - @// POST api/values [HttpPost] public void Post([FromBody]string value)@ Apr 22, 2019 at 12:38
  • First, make sure that your handleRegistration() method is called. Once you make sure it is called, you should catch the error by adding a catch block to your promise chain. When you get the error message, we can figure something out. Apr 22, 2019 at 13:35
  • Yes, good idea. It turned out to be: Error: "Request failed with status code 400" Apr 22, 2019 at 13:38

2 Answers 2

0

You need to send your data using FormData object as Follows:

var formData = new FormData();
formData.append('email', this.state.email);
formData.append('firstName', this.state.firstName);
formData.append('password', this.state.password);
formData.append('password', this.state.password);

More details can be found FormData doc and in this question

1
  • It worked, however, the param's value in the Action Method is null. Now I will have to figure this out :) Apr 23, 2019 at 7:59
0

Remove {} that wrap user inside axios.post(..., user)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.