Express js - cannot get query parameters from url (req.query is an empty object)

Question

I know this topic was mentioned here and here but it didn't work for me.

I'm trying to get parameters from URL using req.query. In my server.js file I've got this:

app.get('/reset-pass', function(req,res) {
    console.log(req.url);
    console.log(req.query);
})

When I'm entering URL e.g. http://localhost:3000/reset-pass?email=anything, server console outputs this:

/reset-pass
[Object: null prototype] {}

and when I fetch from http://localhost:4001/reset-pass, browser console outputs empty object:

data {
    "query": {}
}

As you can see I run my node server on 4001 port and client site on 3000 (because I'm running React on that port) and it's working well doing POST requests or redirects, but in GET case it doesn't return query params. Any weird # do not appear in my path (or I just don't know it).

What's wrong with it?

Your statement looks contract with each other. Above example you use 3000 for server, but at bottom you say you run node on 4001..? And what is that # you are talking about? — Cloud Soh Jun Fu, Jun 25 '20 at 13:54
I'm running views on `localhost:3000` because I'm using React, so to run my server that will be not interfering with app views I'm running server on another port (I've got proxy setup in package.json to operate this correctly. And I mentioned about `#` because in [this](https://stackoverflow.com/questions/47822064/express-req-query-always-empty) case problem was solved by removing `#` manually. — nymphais, Jun 25 '20 at 14:18

score 1 · Answer 1 · answered Jun 25 '20 at 13:55

1

Try

req.query.email

Hope this solves your issue

answered Jun 25 '20 at 13:55

Jaswanth Karani

156
2
11

1

Unfortunately it returns `undefined`. – nymphais Jun 25 '20 at 14:11
worked for me. but why does this happen? the docs use `req.params` https://expressjs.com/en/guide/routing.html – Imnotapotato Mar 04 '21 at 12:49

score 0 · Answer 2 · answered Jun 25 '20 at 14:12

0

There must be another problem in your code. Because i just tested as you did, totally same route.

router.get('/reset-pass', function (req, res) {
    console.log(req.url);
    console.log(req.query);
    res.json({
        url: req.url,
        query: req.query,
    });
});

Returns as:

{
    "url": "/reset-pass?email=anything",
    "query": {
        "email": "anything"
    }
}

And console.log as:

And it's ok. There is no problem with this operation. You should check other parts of your code.

answered Jun 25 '20 at 14:12

dogukyilmaz

585
5
11

I didn't wanted to use `express.Router();` because when I'm trying to make something as you suggested `router.get('/reset-pass', function (req, res) { console.log(req.url); console.log(req.query); })` I receive an error: `GET http://localhost:4001/reset-pass 404 (Not Found)` Also I don't know what else I should check in my code... I'm quite new to Express. Maybe it's connected to running server on another port than client views? – nymphais Jun 25 '20 at 14:30
It gives same result with app.get(....), it's ok, don't mind router. Inside your route don't forget to return something. You can use either res.send() or res.json() Because if you don't return something as response(res), probably is another problem. try inside your function after console.logs also as you said check your port. which port did you start express server then request to that port. – dogukyilmaz Jun 27 '20 at 20:01

score -2 · Accepted Answer · answered Jun 30 '20 at 10:38

I've figured out what was wrong.

Everything was perfectly fine with server. When I typed query in browser using server port, not client port (http://localhost:4001/reset-pass?email=anything), console.log in server terminal outputs everything correctly (as douscriptist said) or on page (e.g. using res.send()) it displays expected data.

The problem was with displaying URL parameters in React (in client view).

Trying to fetch data was just unnecessary in this case. I should have used React Router specifying routes like this:

App.js

<Router>
    <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/reset-pass">
            <Route path="/:email" component={ResetPass} />
        </Route>
        <Route component={NoMatch} />
    </Switch>
</Router>

And then in ResetPass.js using match and location I'm able to display query parameters. For quick pars URL string I've added query-string module

ResetPass.js

import React, { Fragment } from "react";
import queryString from "query-string";

const ResetPass = ({ match, location }) => {
    console.log("MATCH", match);
    console.log("LOCATION", location);
    const parsed = queryString.parse(location.search);
    return (
        <Fragment>
            <p>Params: {parsed.email}</p> {/* => Params: anything*/}
        </Fragment>
    );
};

export default ResetPass;

So when I enter URL http://localhost:3000/reset-pass?email=anything, console.log (in browser) returns this:

MATCH {path: "/:email", url: "/reset-pass", isExact: true, params: {email: "reset-pass"}}
LOCATION {pathname: "/reset-pass", search: "?email=anything", hash: "", state: undefined}

I hope that I've explained everything correctly.

Express js - cannot get query parameters from url (req.query is an empty object)

3 Answers3

The problem was with displaying URL parameters in React (in client view).

App.js

ResetPass.js