Cannot POST / error using express

I am trying to create a simple form handler using express. I tried the code below for my form:

<form class="form"  action="/" method="post" name="regForm">              
    <div class="form-group">
        <input type="text" name="username" class="form-control" id="username" placeholder="Username">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

And here is my app.js code:

const port = 3000;

var express = require('express'),
    app = express(),
    server = require('http').createServer(app);
var bodyParser = require('body-parser');

app.use(express.static(__dirname + '/public'));

app.use(bodyParser.urlencoded({
   extended: true;
}));

app.use(bodyParser.json());

app.post('/',function(req,res){
   var username = req.body.username;
   var html = 'Hello:' + username;
   res.send(html);
   console.log(html);
});

server.listen(port);

I keep getting the error "CANNOT POST /" after submitting the form. Am I missing something like a module?

This way you should try

const port = 3000;

var express = require('express'),
    app = express();
var bodyParser = require('body-parser');

app.use(express.static(__dirname + '/public'));

app.use(bodyParser.urlencoded({
   extended: false
}));

app.use(bodyParser.json());

app.get('/', function(req, res){
  res.render('form');// if jade
  // You should use one of line depending on type of frontend you are with
  res.sendFile(__dirname + '/form.html'); //if html file is root directory
 res.sendFile("index.html"); //if html file is within public directory
});

app.post('/',function(req,res){
   var username = req.body.username;
   var htmlData = 'Hello:' + username;
   res.send(htmlData);
   console.log(htmlData);
});

app.listen(port);

Things you should keep in mind for future Ref :

You were extending url encode to true
You were not having any get request for your form
You were using HTML named variable which is one of bad practices

Thanks & Cheers

Another Way is that we can use .route method provided by express

https://expressjs.com/en/guide/routing.html

Eg:

app.route("url")
   .get(function())

   .post(function());

remember to close the .route function using semi colon ;

In my case, I wasn't paying attention to the url I was posting from.

I had the page login http://localhost:5000/login which was posting and, if successful, renders the page account http://localhost:5000/account.

But, playing few times with these 2 pages, the link remained at http://localhost:5000/account but displayed the login page. So, when I was clicking the log in button which had a form with method = "post", I was getting the error Cannot POST /account.

So the fix was to correctly render the login page, by typing in the url of login page http://localhost:5000/login.

Seems to work fine here.

The only bug I found is here:

extended: true;

You need to remove the semicolon at the end.

Also, you don't need action="/" in your form tag, just FYI.

Cannot POST / error using express

Related

Recent Posts