Seth Marks
Seth Marks

Reputation: 53

Why is my POST request creating URL Query Strings?

I have a React program with a routing issue. I am using a POST Request for the registration System, and whenever I hit register, the user-entered password and email address and put up top in the URL which I do not want. I don't know why this POST Request is displaying such things in the URL. It's also just taking me to a blank page. I think that is an issue with .get('/');

This is the code that is invoked when I click "Register":

onSubmitSignIn = () => {
        fetch('http://localhost:3000/register', {
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
                name: this.state.name
            })
        })
        .then(response => response.json())
        .then(user => {
            if (user.id) {
                this.props.loadUser(user);
                this.props.onRouteChange('home');
            }
        })
    }

And here are all of the routes on the server:

app.get('/', (req, res) => { res.send() });
app.post('/signin', Signin.handleSignin(db, bcrypt));
app.post('/register', (req, res) => { Register.handleRegister(req, res, db, bcrypt) });
app.get('/profile/:id', (req, res) => { Profile.handleProfileGet(req, res, db)});
app.put('/image', (req, res) => { Image.handleImage(req, res, db)});
app.post('/imageurl', (req, res) => { Image.handleApiCall(req, res)});

Does anyone know why it would be creating URL parameters? I didn't tell it to. The /signin route is also a POST Request but it doesn't do that.

Upvotes: 0

Views: 161

Answers (1)

Chase
Chase

Reputation: 3126

I'd check your browser console to confirm it is actually being sent as a POST and not a GET. Having the data in the URL is an indication it is being submit as a GET via Form Submit. I do not thing it is at fault, but I'd change your method from post to POST. More likely, I suspect your form markup may be setup to be a GET and your custom fetch logic is not properly cancelling the form submit event.

Upvotes: 1

Related Questions