Express post request timing out in chrome - javascript

I am new to API development and am trying to create a post request and send data to an API but it keeps timing out in chrome. The error I am getting is net::ERR_EMPTY_RESPONSE.
This is my js where I am trying to send the info. It is called in another method called addToCart() where I am passing in the cart as a parameter.
function sendToAPI(cart) {
var req = new XMLHttpRequest();
req.open('POST', '/add');
req.setRequestHeader('Content-Type', 'application/json');
req.send(JSON.stringify({cart : cart}));
req.addEventListener('load', () => {
console.log(req.resonseText);
})
req.addEventListener('error', () => {
console.log('There was an error');
console.log(error);
});
}
This is where I am creating the API:
const express = require("express");
const bodyParser = require("body-parser");
const api = express();
api.use(express.static(__dirname + '/public'));
api.use(bodyParser);
api.listen(3000, function() {
console.log("Server is running on port 3000");
});
api.post('/add', function(req, res) {
console.log(req.body);
res.send("It works");
});

I see a couple problems. First, this is not correct:
api.use(bodyParser);
For a JSON response, you would do this:
api.use(bodyParser.json());
And, body-parser is built into Express so you don't need to manually load the body-parser module. You can just do this:
api.use(express.text());
Then, in your client-side code, this:
console.log(req.resonseText);
is misspelled and should be this:
console.log(req.responseText);
And, in your client-side code, you should also be checking the status code returned by the response.
FYI, the new fetch() interface in the browser is soooo much nicer to use than XMLHttpRequest.

Related

get method not displaying the data on browser and put showing error on postman

I'm creating an API with JS. While using the get method I'm not receiving the JSON data from the ./personal_data.js file. It's only displaying closed braces as response.
I'm attaching the code and output below. Any suggestions might be helpful.
const express = require('express');
const personal_data = require('./personal_data');
const app = express();
app.listen(3000, () => {
console.log('Listening on port 3000');
});
app.get('/', (req, res) => {
res.json({ Message: 'API is Working' }); // show messsage on serv
});
app.get('/personal_data', (req, res) => {
res.json(personal_data); // send employee json file
});
app.post('/personal_data',(req,res)=>{
res.send('post request')
})
json file with data
OUTPUT
Post man
Make sure you're exporting your data correctly. Use module.exports = ... instead of module.export = ... in your personal_data.js. Don't forget to restart your server once it's updated.
Check this sandbox where I show you the difference: CodeSandbox

How to read values sent in Xmlhttprequest POST request on my express backend in Nodejs?

I want to send the values of candid and candidresults to my /savevote route in my express backend. How can i do that properly.
var candid;
var candidresults;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'savevote', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
contractInstance.voteForCandidate(candidateName, {
from: web3.eth.accounts[0]
}, function () {
console.log(contractInstance.totalVotesFor(candidateName).toString());
candid = candidateName;
candidresults = contractInstance.totalVotesFor(candidateName).toString();
console.log(this.responseText);
};
xhr.send(candid);
xhr.send(candidresults);
}
Also,how do i access these values from my /savevote route that i've created below in my Express backend as shown below
router.post('/savevote', function (req, res, next) {
});
On your express, you need to use middleware in order to read the params from req.body
Below is a sample code
const express = require('express')
const app = express()
app.use(express.urlencoded())
app.post('/savevote', (req, res) => {
res.json({
msg: "Echo respose"
candid: req.body.candid,
candidresults: req.body.candidresults
})
})
app.listen(3000)
Also, from the UI, you can not call xhr.send multiple times.
It should be only called once as shown below
xhr.send("foo=bar&lorem=ipsum");

Button to send http to NodeJS/Express backend to execute a function

I have a button in my frontend, and am using nodejs and express on my server-side backend. I have a function (essentially controlling Philips Hue API) on the backend, and I would like it to be executed when the button is clicked, through a http request.
I have tried different methods. the backend script for the Philips Hue controls work independently when i extract it and run it in git bash. I think there's some conceptual or coding errors on end.
Html Button
<button id="pulse" type="button" class="btn btn-danger">Pulsing Lights</button>
Client side JS
const pulseButton = document.getElementById("pulse");
pulseButton.addEventListener('click', function() {
fetch('/huePulseLight', {method: 'POST'})
.then(function(response) {
if(response.ok) {
console.log('Click was recorded');
return;
}
throw new Error('Request failed.');
})
.catch(function(error) {
console.log(error);
});
});
Backend/Server Side JS
const port = 3000;
const server = http.Server(app);
server.listen(process.env.PORT || 3000, function(){
console.log('Server running on port ' + port);
});
const app = express();
pulseLight = lightState.create().on().colorLoop();
function setPulseLight() {
nodeHueapi.setLightState(1, pulseLight, function (err, lights) {
if (err) throw err;
displayResult(lights);
});
nodeHueapi.setLightState(2, pulseLight, function (err, lights) {
if (err) throw err;
displayResult(lights);
});
nodeHueapi.setLightState(3, pulseLight, function (err, lights) {
if (err) throw err;
displayResult(lights);
});
}
app.post('/huePulseLight', function(req, res){
console.log("Pulse Light Set");
setPulseLight();
});
Isolate the problem. Make sure both your server and browser consoles are communicating properly before adding anything else. This is more-or-less the minimum code for the client and server to communicate. Run node server.js in test, navigate to localhost:3000, click the text, observe the console outputs.
test/server.js
const express = require("express")
const app = express()
// make index.html accessible to clients
app.use(express.static('public'))
app.post('/huePulseLight', function(request, response){
console.log("Pulse Light Set");
response.send("Click Recorded")
});
app.listen(3000)
test/public/index.html
<html>
<head></head>
</body>
<p id="pulse">foo</p>
<script>
const pulseButton = document.getElementById("pulse")
pulseButton.addEventListener('click', function() {
fetch('/huePulseLight', {method: 'POST'})
.then(response => response.text())
.then(text => console.log(text))
})
</script>
</body>
</html>
You are missing app.listen(PORT) on your server.
Also, you're not sending back anything from the server to the client, that might cause the client to keep the connection open with the server and your fetch promise will never resolved.

Getting cannot POST / error in Express

I have a RESTful API that I am using postman to make a call to my route /websites. Whenever I make the call, postman says "Cannot POST /websites". I am trying to implement a job queue and I'm using Express, Kue(Redis) and MongoDB.
Here is my routes file:
'use strict';
module.exports = function(app) {
// Create a new website
const websites = require('./controllers/website.controller.js');
app.post('/websites', function(req, res) {
const content = req.body;
websites.create(content, (err) => {
if (err) {
return res.json({
error: err,
success: false,
message: 'Could not create content',
});
} else {
return res.json({
error: null,
success: true,
message: 'Created a website!', content
});
}
})
});
}
Here is the server file:
const express = require('express');
const bodyParser = require('body-parser');
const kue = require('kue');
const websites = require('./app/routes/website.routes.js')
kue.app.listen(3000);
var app = express();
const redis = require('redis');
const client = redis.createClient();
client.on('connect', () =>{
console.log('Redis connection established');
})
app.use('/websites', websites);
I've never used Express and I have no idea what is going on here. Any amount of help would be great!!
Thank you!
The problem is how you are using the app.use and the app.post. You have.
app.use('/websites', websites);
And inside websites you have:
app.post('/websites', function....
So to reach that code you need to make a post to localhost:3000/websites/websites. What you need to do is simply remove the /websites from your routes.
//to reach here post to localhost:3000/websites
app.post('/' , function(req, res) {
});

Cannot GET / DELETE Express.js

I have this script with which I'm trying to POST, GET and DELETE some stuff.
When I try POST or GET, the right messages are logged, but when I try DELETE, I get the following error:
Cannot GET /del_user
The URL I'm using is http://127.0.0.1:8081/del_user
What can be wrong in here?
var express = require('express');
var app = express();
// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
console.log("Got a GET request for the homepage");
res.send('Hello GET');
})
// This responds a POST request for the homepage
app.post('/', function (req, res) {
console.log("Got a POST request for the homepage");
res.send('Hello POST');
})
// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
console.log("Got a DELETE request for /del_user");
res.send('Hello DELETE');
})
// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
console.log("Got a GET request for /list_user");
res.send('Page Listing');
})
// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {
console.log("Got a GET request for /ab*cd");
res.send('Page Pattern Match');
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
I solved it by changing the app.delete to app.get and then placing the required remove statement inside the app.get. Something like this :-
app.get('/delete/:userId', (req, res) => {
Users.remove({ _id: req.params.userId }, (error, posts) => {
if (error) {
console.warn(error);
}
else {
data = posts
res.render("delete", {"data": data})
}
});
});
In your code you're binding the /del_user URL to the HTTP DELETE method.
So all you need to do is specify the DELETE method in your application or in Postman.
If you're not using it, it's an App in Google Chrome and you might want to download it, it makes your life a LOT easier ;)
Also, since the HTTP method is already declared to be DELETE, there is no need to specify it in the URL.
This is part of the RESTful working.
If you are using AJAX to try your code, you need to specify the method, which is delete.
$.ajax({
url: "http://127.0.0.1:8081/del_user",
type: "DELETE"
});

Categories