Unable to retrieve Req.Query on Express - javascript

I am currently trying to retrieve my Query String data to use it as a parameter for my OpenWeather API call later on.
I am having issues retrieving the Query String that is being sent to my server although it appears on the URL request. I keep getting "undefined" when I try to console.log the req.query on my server. I'm guessing that I didn't parse the Query String data properly which causes it to be "undefined". So looking at the picture i've attached, using the city=Tokyo as my req.query.
I've pasted the client-side, server-side, and screenshots of my web app.
Any ideas?
P.S. I've just started learning, so I'm sorry in advance
**Client-Side JS file**
let cityForm = document.querySelector('#cityName');
let city = document.querySelector('#city');
let button = document.querySelector('#btn');
button.addEventListener('click', getData);
async function getData () {
console.log('Value entered '+ city.value);
let options = {
method: "POST",
headers: {
'Content-Type': 'application/text'
},
body: JSON.stringify(city.value)
};
console.log('value being sent ' + options.body);
let fetchin = await fetch('/', options); // making the post request here to the server
let rezponse = await fetchin.json();
console.log(rezponse);
};
**Server-Side JS file**
let express = require('express');
let app = express();
let bodyParser = require('body-parser');
let fetch = require('node-fetch');
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.set('view engine','ejs');
app.use(express.static(__dirname + '/views'));
app.get('/', (req, res) =>{
res.render('home');
});
app.post('/', async (req, res)=>{
console.log('The value of the query '+ req.query);
// let user = await fetch('http://api.openweathermap.org/data/2.5/weather?q=' + req.query.city + '&appid=APIKEY');
// let item = await user.json();
// res.json(user);
// console.log(item);
//Idea is to use the req.query coming from the client-side to use for
in the API call to OpenWeather, get the details from the API and send it back
});
app.listen(4000, ()=>{
console.log('Post has been called');
});

you are missing the search params that are required to be added to the url, so that you can access them on the server
//client side
let options = {
method: "POST",
headers: {
'Content-Type': 'application/text'
}
};
let url = new URL('/');
url.searchParams.set('q', 'Tokyo')
let fetchin = await fetch(url, options);

On the server-side, you are trying to log the req.query when you post to /.
app.post('/', async (req, res)=>{
console.log('The value of the query '+ req.query);
However, on the client-side, you are posting to / without any query params.
let fetchin = await fetch('/', options);
You could append the query params to / like shown below.
let fetchin = await fetch(`/city=${city.value}`, options);
OR
Since you are already posting the city.value as the post body from the client side, on the server side you can access it using req.body.
app.post('/', async (req, res)=>{
console.log('The value of req body '+ req.body);

Related

POST data passed from frontend JS to Nodejs/Expressjs is always undefined

I have a frontend JS script that takes text input from an HTML text box and sends it to an expressjs server. The body of the POST request, though, is always undefined, or depending on how I tweak things, returning as "{ }" if I view it via console.log( ). As I'm new to this, I can't seem to see what's going wrong.
Front end js:
async function submitCity(){
let x = document.getElementById("wg_input").value;
console.log("Successfully captured city name:", x);
let toWeather = JSON.stringify(x);
console.log("Input data successfully converted to JSON string:", toWeather);
const options = {
method: 'POST',
mode: 'cors',
headers: {'Content-Type': 'text/plain'},
body: toWeather
}
fetch('http://localhost:3000', options)
.then(res => console.log(res))
.catch(error => console.log(error))
}
Backend:
// Dependencies
const express = require('express');
const bp = require("body-parser");
const request = require("request");
const jimp = require('jimp');
const cors = require('cors');
const wgServer = express();
const port = 3000;
// Dotenv package
require("dotenv").config();
// OpenWeatherMap API_KEY
const apiKey = `${process.env.API_KEY}`;
// Basic server initialization
wgServer.use(cors())
wgServer.use(bp.json())
wgServer.use(bp.urlencoded({ extended: true }))
wgServer.listen(port, function() {
console.log(`Example app listening on port ${port}!`)
});
wgServer.post('/', async function (req, res) {
res.set('Content-Type', 'text/plain');
console.log(req.body)
res.send('Hello World');
//const data = await req.body;
// let jsonData = JSON.stringify(req.body);
// res.status(201);
//res.json();
});
The returned data is supposed to be a string of about 15 characters, give or take a few (a city and state). I thank you in advance.

How to send data to the client and save it as a cookie

I know the basics of coding but I'm trying to understand API's, at the moment I'm trying to make an API that authorizes a user so I can see their information in a game.
Essentially I need to send data to my client from my server which is running Node.js and Express. I have managed to get the user authenticated but I then need to save that information as a cookie for later use.
The webapp starts on index.html and the API redirects the user back to auth.html.
Server Side Code
require('dotenv').config();
const express = require('express');
const {
addAsync
} = require('#awaitjs/express');
const app = addAsync(express());
const path = require('path');
const url = require('url');
const fetch = require("node-fetch");
const base64 = require('base-64');
const http = require('http');
// config libraries
const client_secret = process.env.CLIENT_SECRET;
// get env variables
function getCode(req) {
var ru = url.format({
protocol: req.protocol,
host: req.get('host'),
pathname: req.originalUrl
});
return ru.split("code=")[1];
}; // parse url to get auth code
const port = process.env.PORT || 4645;
app.listen(port, () => {
console.log(`listening on port ${port}`);
}); // set http server
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
}); // set '/' as index.html
app.getAsync('/auth', async (req, res) => {
res.sendFile(path.join(__dirname, 'auth.html'));
const code = getCode(req);
const options = {
method: 'POST',
headers: {
'Authorization': `Basic ${base64.encode(`35544:${client_secret}`)}`,
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `grant_type=authorization_code&code=${code}`
}
const obj = await fetch('https://www.bungie.net/platform/app/oauth/token/', options); // response
const data = await obj.json(); // json response = data
console.log(data);
// send json to client
res.json(data);
res.end();
});
app.get('/logout', async (req, res) => {
res.redirect('/');
});
Client Side Code (index.html)
<head>
<script>
// code
</script>
</head>
<body>
index.html <br>
<a href='https://www.bungie.net/en/OAuth/Authorize?client_id=35544&response_type=code'>log in</a> <br>
</body>
Client Side Code (auth.html)
<head>
<script>
// catch json from server
const options = {
url: '/auth',
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
};
fetch(options).then(response => {
console.log(response);
})
</script>
</head>
<body>
auth.html <br>
<a href='/logout'>log out</a>
</body>
I know it's a lot but I hope someone can help me on this...
Thanks.
Edit:
I forgot to say that currently the client does not recieve the information at any point, and if it did i am unsure how to catch the response at the right time...
Thanks to everyone who already responded.
Without bothering to puzzle-out your code ... "never trust the client."
Never try to send the client any meaningful data as the content of a cookie. The cookie's value should always be a perfectly-meaningless value – a "nonce" – which you can then refer to in order to look up anything you need to know from your server-side database. "You can never trust the client-side."

Sending state for an Axios POST and data not showing in req.body

I'm using React and want to make a POST request using Axios. I'm trying to send form data to my Node backend.
I am trying to send an object in the POST request which is the state holding all of the user's inputs to a form.
React
const [formDetails, setFormDetails] = useState({})
const handleFormChange = (evt) => setFormDetails({ ...formDetails, [evt.target.name]: evt.target.value })
const sendInvoice = async (formDetails) => {
const response = await axios.post('/api/new_invoice', formDetails)
console.log(response)
}
Node route
module.exports = (app) => {
// Create a new invoice
app.post('/api/new_invoice', async (req, res) => {
console.log('making a new invoice...')
try {
console.log(req.body)
res.send(req.body)
} catch (err) {
console.log(err)
res.status(400)
res.send({ error: err })
return
}
})
}
This is what I get back:
When I look at the req.body for the response it is an empty object even though I can see that state is there when sending the form.
I also tried hardcoding an object and that will show the data on the req.body.
For example if I change the request to
const response = await axios.post('/api/new_invoice', {formData: 'this is form data'})
Then I am able to see formData: 'this is form data' in the req.body
You need to stringify the formData, In your sendInvoice function,
Also can you share the sample request body from postman of you have tested API there
let body= JSON.stringify(formData)
const config = {
headers: {
'Content-Type': 'application/JSON'
}
};
const res = await axios.post('/api/v1/new_invoice', body, config);
To handle an incoming JSON object from HTTP POST Request, you need to write the following code -
var express = require('express');
var app=express();
app.use(express.urlencoded()); // To parse URL-encoded bodies
app.use(express.json()); //To parse JSON bodies
// Note: (*applicable for Express 4.16+ )

Calling Express Route internally from inside NodeJS

I have an ExpressJS routing for my API and I want to call it from within NodeJS
var api = require('./routes/api')
app.use('/api', api);
and inside my ./routes/api.js file
var express = require('express');
var router = express.Router();
router.use('/update', require('./update'));
module.exports = router;
so if I want to call /api/update/something/:withParam from my front end its all find, but I need to call this from within another aspect of my NodeJS script without having to redefine the whole function again in 2nd location
I have tried using the HTTP module from inside but I just get a "ECONNREFUSED" error
http.get('/api/update/something/:withParam', function(res) {
console.log("Got response: " + res.statusCode);
res.resume();
}).on('error', function(e) {
console.log("Got error: " + e.message);
});
I understand the idea behind Express is to create routes, but how do I internally call them
The 'usual' or 'correct' way to handle this would be to have the function you want to call broken out by itself, detached from any route definitions. Perhaps in its own module, but not necessarily. Then just call it wherever you need it. Like so:
function updateSomething(thing) {
return myDb.save(thing);
}
// elsewhere:
router.put('/api/update/something/:withParam', function(req, res) {
updateSomething(req.params.withParam)
.then(function() { res.send(200, 'ok'); });
});
// another place:
function someOtherFunction() {
// other code...
updateSomething(...);
// ..
}
This is an easy way to do an internal redirect in Express 4:
The function that magic can do is: app._router.handle()
Testing: We make a request to home "/" and redirect it to otherPath "/other/path"
var app = express()
function otherPath(req, res, next) {
return res.send('ok')
}
function home(req, res, next) {
req.url = '/other/path'
/* Uncomment the next line if you want to change the method */
// req.method = 'POST'
return app._router.handle(req, res, next)
}
app.get('/other/path', otherPath)
app.get('/', home)
I've made a dedicated middleware for this : uest.
Available within req it allows you to req.uest another route (from a given route).
It forwards original cookies to subsequent requests, and keeps req.session in sync across requests, for ex:
app.post('/login', async (req, res, next) => {
const {username, password} = req.body
const {body: session} = await req.uest({
method: 'POST',
url: '/api/sessions',
body: {username, password}
}).catch(next)
console.log(`Welcome back ${session.user.firstname}!`
res.redirect('/profile')
})
It supports Promise, await and error-first callback.
See the README for more details
Separate your app and server files with the app being imported into the server file.
In the place you want to call your app internally, you can import you app as well as 'request' from 'supertest'. Then you can write
request(app).post('/someroute').send({
id: 'ecf8d501-5abe-46a9-984e-e081ac925def',
etc....
});`
This is another way.
const app = require('express')()
const axios = require('axios')
const log = console.log
const PORT = 3000
const URL = 'http://localhost:' + PORT
const apiPath = (path) => URL + path
app.get('/a', (req, res) => {
res.json('yoy')
})
app.get('/b', async (req, res) => {
let a = await axios.get(apiPath('/a'))
res.json(a.data)
})
app.listen(PORT)

URL parameters Node.js Express [duplicate]

Can we get the variables in the query string in Node.js just like we get them in $_GET in PHP?
I know that in Node.js we can get the URL in the request. Is there a method to get the query string parameters?
Since you've mentioned Express.js in your tags, here is an Express-specific answer: use req.query. E.g.
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('id: ' + req.query.id);
});
app.listen(3000);
In Express it's already done for you and you can simply use req.query for that:
var id = req.query.id; // $_GET["id"]
Otherwise, in NodeJS, you can access req.url and the builtin url module to url.parse it manually:
var url = require('url');
var url_parts = url.parse(request.url, true);
var query = url_parts.query;
In Express, use req.query.
req.params only gets the route parameters, not the query string parameters. See the express or sails documentation:
(req.params) Checks route params, ex: /user/:id
(req.query) Checks query string params, ex: ?id=12 Checks urlencoded body params
(req.body), ex: id=12 To utilize urlencoded request bodies, req.body should be an object. This can be done by using the _express.bodyParser middleware.
That said, most of the time, you want to get the value of a parameter irrespective of its source. In that case, use req.param('foo'). Note that this has been deprecated as of Express 4: http://expressjs.com/en/4x/api.html#req.param
The value of the parameter will be returned whether the variable was in the route parameters, query string, or the encoded request body.
Side note- if you're aiming to get the intersection of all three types of request parameters (similar to PHP's $_REQUEST), you just need to merge the parameters together-- here's how I set it up in Sails. Keep in mind that the path/route parameters object (req.params) has array properties, so order matters (although this may change in Express 4)
For Express.js you want to do req.params:
app.get('/user/:id', function(req, res) {
res.send('user' + req.params.id);
});
I learned from the other answers and decided to use this code throughout my site:
var query = require('url').parse(req.url,true).query;
Then you can just call
var id = query.id;
var option = query.option;
where the URL for get should be
/path/filename?id=123&option=456
//get query&params in express
//etc. example.com/user/000000?sex=female
app.get('/user/:id', function(req, res) {
const query = req.query;// query = {sex:"female"}
const params = req.params; //params = {id:"000000"}
})
If you are using ES6 and Express, try this destructuring approach:
const {id, since, fields, anotherField} = request.query;
In context:
const express = require('express');
const app = express();
app.get('/', function(req, res){
const {id, since, fields, anotherField} = req.query;
});
app.listen(3000);
You can use default values with destructuring too:
// sample request for testing
const req = {
query: {
id: '123',
fields: ['a', 'b', 'c']
}
}
const {
id,
since = new Date().toString(),
fields = ['x'],
anotherField = 'default'
} = req.query;
console.log(id, since, fields, anotherField)
There are 2 ways to pass parameters via GET method
Method 1 :
The MVC approach where you pass the parameters like /routename/:paramname
In this case you can use req.params.paramname to get the parameter value For Example refer below code where I am expecting Id as a param
link could be like : http://myhost.com/items/23
var express = require('express');
var app = express();
app.get("items/:id", function(req, res) {
var id = req.params.id;
//further operations to perform
});
app.listen(3000);
Method 2 :
General Approach : Passing variables as query string using '?' operator
For Example refer below code where I am expecting Id as a query parameter
link could be like : http://myhost.com/items?id=23
var express = require('express');
var app = express();
app.get("/items", function(req, res) {
var id = req.query.id;
//further operations to perform
});
app.listen(3000);
You should be able to do something like this:
var http = require('http');
var url = require('url');
http.createServer(function(req,res){
var url_parts = url.parse(req.url, true);
var query = url_parts.query;
console.log(query); //{Object}
res.end("End")
})
UPDATE 4 May 2014
Old answer preserved here: https://gist.github.com/stefek99/b10ed037d2a4a323d638
1) Install express: npm install express
app.js
var express = require('express');
var app = express();
app.get('/endpoint', function(request, response) {
var id = request.query.id;
response.end("I have received the ID: " + id);
});
app.listen(3000);
console.log("node express app started at http://localhost:3000");
2) Run the app: node app.js
3) Visit in the browser: http://localhost:3000/endpoint?id=something
I have received the ID: something
(many things have changed since my answer and I believe it is worth keeping things up to date)
Express specific simple ways to fetch
query strings(after ?) such as https://...?user=abc&id=123
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('id: ' + req.query.id);
});
app.listen(3000);
query params such as https://.../get/users/:id
var express = require('express');
var app = express();
app.get('/get/users/:id', function(req, res){
res.send('id: ' + req.params.id);
});
app.listen(3000);
A small Node.js HTTP server listening on port 9080, parsing GET or POST data and sending it back to the client as part of the response is:
var sys = require('sys'),
url = require('url'),
http = require('http'),
qs = require('querystring');
var server = http.createServer(
function (request, response) {
if (request.method == 'POST') {
var body = '';
request.on('data', function (data) {
body += data;
});
request.on('end',function() {
var POST = qs.parse(body);
//console.log(POST);
response.writeHead( 200 );
response.write( JSON.stringify( POST ) );
response.end();
});
}
else if(request.method == 'GET') {
var url_parts = url.parse(request.url,true);
//console.log(url_parts.query);
response.writeHead( 200 );
response.write( JSON.stringify( url_parts.query ) );
response.end();
}
}
);
server.listen(9080);
Save it as parse.js, and run it on the console by entering "node parse.js".
Whitequark responded nicely. But with the current versions of Node.js and Express.js it requires one more line. Make sure to add the 'require http' (second line). I've posted a fuller example here that shows how this call can work. Once running, type http://localhost:8080/?name=abel&fruit=apple in your browser, and you will get a cool response based on the code.
var express = require('express');
var http = require('http');
var app = express();
app.configure(function(){
app.set('port', 8080);
});
app.get('/', function(req, res){
res.writeHead(200, {'content-type': 'text/plain'});
res.write('name: ' + req.query.name + '\n');
res.write('fruit: ' + req.query.fruit + '\n');
res.write('query: ' + req.query + '\n');
queryStuff = JSON.stringify(req.query);
res.end('That\'s all folks' + '\n' + queryStuff);
});
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
})
It is so simple:
Example URL:
http://stackoverflow.com:3000/activate_accountid=3&activatekey=$2a$08$jvGevXUOvYxKsiBt.PpMs.zgzD4C/wwTsvjzfUrqLrgS3zXJVfVRK
You can print all the values of query string by using:
console.log("All query strings: " + JSON.stringify(req.query));
Output
All query strings : { "id":"3","activatekey":"$2a$08$jvGevXUOvYxKsiBt.PpMs.zgzD4C/wwTsvjz
fUrqLrgS3zXJVfVRK"}
To print specific:
console.log("activatekey: " + req.query.activatekey);
Output
activatekey: $2a$08$jvGevXUOvYxKsiBt.PpMs.zgzD4C/wwTsvjzfUrqLrgS3zXJVfVRK
You can use
request.query.<varible-name>;
You can use with express ^4.15.4:
var express = require('express'),
router = express.Router();
router.get('/', function (req, res, next) {
console.log(req.query);
});
Hope this helps.
In express.js you can get it pretty easy, all you need to do in your controller function is:
app.get('/', (req, res, next) => {
const {id} = req.query;
// rest of your code here...
})
And that's all, assuming you are using es6 syntax.
PD. {id} stands for Object destructuring, a new es6 feature.
app.get('/user/:id', function(req, res) {
res.send('user' + req.params.id);
});
You can use this or you can try body-parser for parsing special element from the request parameters.
consider this url -> /api/endpoint/:id?name=sahil
here id is param where as name is query. You can get this value in nodejs like this
app.get('/api/endpoint/:id', (req, res) => {
const name = req.query.name; // query
const id = req.params.id //params
});
There are many answers here regarding accessing the query using request.query however, none have mentioned its type quirk. The query string type can be either a string or an array, and this type is controlled by the user.
For instance using the following code:
const express = require("express");
const app = express();
app.get("/", function (req, res) {
res.send(`Your name is ${(req.query.name || "").length} characters long`);
});
app.listen(3000);
Requesting /?name=bob will return Your name is 3 characters long but requesting /?name=bob&name=jane will return Your name is 2 characters long because the parameter is now an array ['bob', 'jane'].
Express offers 2 query parsers: simple and extended, both will give you either a string or an array. Rather than checking a method for possible side effects or validating types, I personally think you should override the parser to have a consistent type: all arrays or all strings.
const express = require("express");
const app = express();
const querystring = require("querystring");
// if asArray=false only the first item with the same name will be returned
// if asArray=true all items will be returned as an array (even if they are a single item)
const asArray = false;
app.set("query parser", (qs) => {
const parsed = querystring.parse(qs);
return Object.entries(parsed).reduce((previous, [key, value]) => {
const isArray = Array.isArray(value);
if (!asArray && isArray) {
value = value[0];
} else if (asArray && !isArray) {
value = [value];
}
previous[key] = value;
return previous;
}, {});
});
app.get("/", function (req, res) {
res.send(`Your name is ${(req.query.name || "").length} characters long`);
});
app.listen(3000);
So, there are two ways in which this "id" can be received:
1) using params: the code params will look something like :
Say we have an array,
const courses = [{
id: 1,
name: 'Mathematics'
},
{
id: 2,
name: 'History'
}
];
Then for params we can do something like:
app.get('/api/posts/:id',(req,res)=>{
const course = courses.find(o=>o.id == (req.params.id))
res.send(course);
});
2) Another method is to use query parameters.
so the url will look something like ".....\api\xyz?id=1" where "?id=1" is the query part. In this case we can do something like:
app.get('/api/posts',(req,res)=>{
const course = courses.find(o=>o.id == (req.query.id))
res.send(course);
});
In case you want to avoid express, use this example:
var http = require('http');
const url = require('url');
function func111(req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
var q = url.parse(req.url, true);
res.end("9999999>>> " + q.query['user_name']);
}
http.createServer(func111).listen(3000);
usage:
curl http://localhost:3000?user_name=user1
by yl
you can use url module to collect parameters by using url.parse
var url = require('url');
var url_data = url.parse(request.url, true);
var query = url_data.query;
In expressjs it's done by,
var id = req.query.id;
Eg:
var express = require('express');
var app = express();
app.get('/login', function (req, res, next) {
console.log(req.query);
console.log(req.query.id); //Give parameter id
});
If you ever need to send GET request to an IP as well as a Domain (Other answers did not mention you can specify a port variable), you can make use of this function:
function getCode(host, port, path, queryString) {
console.log("(" + host + ":" + port + path + ")" + "Running httpHelper.getCode()")
// Construct url and query string
const requestUrl = url.parse(url.format({
protocol: 'http',
hostname: host,
pathname: path,
port: port,
query: queryString
}));
console.log("(" + host + path + ")" + "Sending GET request")
// Send request
console.log(url.format(requestUrl))
http.get(url.format(requestUrl), (resp) => {
let data = '';
// A chunk of data has been received.
resp.on('data', (chunk) => {
console.log("GET chunk: " + chunk);
data += chunk;
});
// The whole response has been received. Print out the result.
resp.on('end', () => {
console.log("GET end of response: " + data);
});
}).on("error", (err) => {
console.log("GET Error: " + err);
});
}
Don't miss requiring modules at the top of your file:
http = require("http");
url = require('url')
Also bare in mind that you may use https module for communicating over secured domains and ssl. so these two lines would change:
https = require("https");
...
https.get(url.format(requestUrl), (resp) => { ......
do like me
npm query-string
import queryString from "query-string";
export interface QueryUrl {
limit?: number;
range?: string;
page?: number;
filed?: string;
embody?: string;
q?: string | object;
order?: number;
sort?: string;
}
let parseUri: QueryUrl = queryString.parse(uri.query);
I am using MEANJS 0.6.0 with express#4.16, it's good
Client:
Controller:
var input = { keyword: vm.keyword };
ProductAPi.getOrder(input)
services:
this.getOrder = function (input) {return $http.get('/api/order', { params: input });};
Server
routes
app.route('/api/order').get(products.order);
controller
exports.order = function (req, res) {
var keyword = req.query.keyword
...

Categories