1

I need to submit a form. It currently works if I do it in the HTML form, but I really need to make some stuff after so I need to do it in react. So I'm using axios.

However, using axios I don't get a response back. Also there's something strange, because although I'm doing a post request, the data appears as a query string on the browser... Not sure if that's the normal behaviour.

Here's my code, on the server side:

app.post("/auth/register", async function(req, res, next) {
    // some code
    // my responses are like res.json("/signup/success");
}

on the client side:

onSubmit(event) {
    axios({
        method: "post",
        url: "/auth/register",
        data: {
            username: this.state.username,
            password: this.state.password,
            accountName: this.state.accountName
        },
        withCredentials: true
    }).then(result => {
        console.log(result);
    });
}

I'm running a server on port 5000 using express, and I used create-react-app to run a server on port 3000. To manage authentication, passport.js.

I use http-proxy-middleware to proxy some endpoints to the express server.

After submitting the form I get this on the console:

I've been at this for days, wandering around stackoverflow and everywhere else, and I'm completely stuck... Can anyone please give me a hint on what can I do?

2
  • Where are you specifying the port axios should send the request to ? Commented Feb 18, 2019 at 14:20
  • it has a proxy so no need to specify the port... anyway I think I found the solution (which is ironic since I've been for days with this and the moment I decide to swallow pride and ask for help... I get there). It was... lack of event.preventDefault(). Yes, that stupid mistake. Dumb mistake. I'll just take another look and make sure it works and I'll post the answer next so I can help someone else :) Commented Feb 18, 2019 at 14:32

2 Answers 2

3

Ok so it seems I've found my own answer... Finally. Thank you all for your help!

The problem was pretty basic, pretty dumb. Simply the lack of "event.preventDefault()". Just that... Yeah call me stupid, I've been telling that to myself for the past hours

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

4 Comments

"Stupid" would be not posting your question here. By posting, you helped me and others who made exactly the same mistake. By posting, you made stackoverflow a better place. Have a nice day!
@José Pedro Sousa, can you, please, clarify the cause of the issue? Is it all about some "button press" event? Why does unprevented event make axios not to receive response? I get the same behavior in my React Native project sometimes, but there is no event to prevent.)
@VyacheslavOrlovsky as far as I can tell if you don't call preventDefault() the page will reload immediately as that's the default behaviour for a submit button. I don't know how this would apply to React Native as my experience with RN is superficial. I hope this helped somehow...
@José Pedro Sousa, thanks for you response. Got it, your case looks to be related to pure React for web only. And I've already figured out that my case is about inatentiveness - faulty error handling inside my Axios response interceptor make it fail silently.
0

axios.create({ baseURL: http://localhost:5000/ });

set baseURL before sending request.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.