Axios Post Method does not activate the Action in the BackEnd

Question

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.

This is the endpoint specified in the action method - @// POST api/values [HttpPost] public void Post([FromBody]string value)@ — Edwardcho Vaklinov, Apr 22 '19 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. — Burak Gavas, Apr 22 '19 at 13:35
Yes, good idea. It turned out to be: Error: "Request failed with status code 400" — Edwardcho Vaklinov, Apr 22 '19 at 13:38

score 0 · Answer 1 · answered Apr 22 '19 at 17:49

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

answered Apr 22 '19 at 17:49

Zolfekar Askarieh

201
2
2

It worked, however, the param's value in the Action Method is null. Now I will have to figure this out :) – Edwardcho Vaklinov Apr 23 '19 at 07:59

score 0 · Answer 2 · answered Jun 20 '20 at 20:19

0

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

answered Jun 20 '20 at 20:19

herosuper

164
1
9

Axios Post Method does not activate the Action in the BackEnd

2 Answers2