Cannot POST error on form submit with nodejs backend - node.js

Question

I am using the following stack :
React
PassportJS
NodeJS
Express and express-session
create-react-app with webpack dev server proxying API requests to my node server as mentioned in this article
When I do a form submit, I get an error Cannot POST however when I submit to the SAME url using POSTMAN or curl XPOST, I get results. Here is my server.js code :
'use strict';
const PORT = process.env.PORT || 3001;
const express = require('express');
const app = express();
const path = require('path');
const passport = require('passport')
const initPassport = require('./passport/init');
const session = require('express-session')
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser')
const configDB = require('./config/database.js');
const MongoStore = require('connect-mongo')(session);
var flash = require('connect-flash');
//Connect to mongo
mongoose.connect(configDB.url, {
useMongoClient: true
}).then(() => console.log('connection with database succeeded'))
.catch(err => console.error(err));
// Initialize Passport
initPassport(passport);
// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));
//use cookie parser to store data
app.use(cookieParser());
app.use(session({
secret: 'mysecret',
store : new MongoStore ({
db : mongoose.connection.db,
host : '127.0.0.1',
port : '27017',
url : configDB.url
}),
maxAge : 2 * 60 * 60 * 1000,
resave: false,
saveUninitialized: false
})); // session secret
app.use(bodyParser.urlencoded({ extended: false }));
app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions
app.use(flash()); // use connect-flash for flash messages stored in session
app.post('/signup', passport.authenticate('signup', {
successRedirect: '/',
failureRedirect: '/signup'
}));
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}!`);
});
Form PAGE :
import React, { Component } from 'react';
import constants from 'constants/AuthPageConstants';
class RegisterForm extends Component {
render() {
return (
<div className="tab-pane fade in" id="basic-tab2">
<form action="/signup" method="POST">
<div className="text-center">
<div className="icon-object border-success text-success"><i className="icon-plus3"></i></div>
<h5 className="content-group">{constants.register_form_title} <small className="display-block">{constants.register_form_subtitle}</small></h5>
</div>
<div className="form-group has-feedback has-feedback-left">
<input type="text" name="username" className="form-control" placeholder={constants.register_username_placeholder} />
<div className="form-control-feedback">
<i className="icon-user-check text-muted"></i>
</div>
</div>
<div className="form-group has-feedback has-feedback-left">
<input type="password" name="password" className="form-control" placeholder={constants.register_password_placeholder} />
<div className="form-control-feedback">
<i className="icon-user-lock text-muted"></i>
</div>
</div>
<div className="form-group has-feedback has-feedback-left">
<input type="text" name="email" className="form-control" placeholder={constants.register_email_placeholder} />
<div className="form-control-feedback">
<i className="icon-mention text-muted"></i>
</div>
</div>
<div className="content-divider text-muted form-group"><span>Additions</span></div>
<div className="form-group">
<div className="checkbox">
<label>
<input type="checkbox" className="styled" />
{constants.tos_txt.substring(0, constants.tos_txt.indexOf(" "))} {constants.tos_txt.substr(constants.tos_txt.indexOf(" ") + 1)}
</label>
</div>
</div>
<button type="submit" className="btn bg-indigo-400 btn-block">Register <i className="icon-circle-right2 position-right"></i></button>
</form>
</div>
)
}
}
export default RegisterForm
Signup passport strategy
var LocalStrategy = require('passport-local').Strategy;
var User = require('../models/user');
var bCrypt = require('bcrypt');
module.exports = function(passport){
passport.use('signup', new LocalStrategy({
passReqToCallback : true // allows us to pass back the entire request to the callback
},
function(req, username, password, done) {
console.log("In Signup");
findOrCreateUser = function(){
// find a user in Mongo with provided username
User.findOne({ 'username' : username }, function(err, user) {
// In case of any error, return using the done method
if (err){
console.log('Error in SignUp: '+err);
return done(err);
}
// already exists
if (user) {
console.log('User already exists with username: '+username);
return done(null, false, req.flash('message','User Already Exists'));
} else {
// if there is no user with that email
// create the user
var newUser = new User();
// set the user's local credentials
newUser.username = username;
newUser.password = createHash(password);
newUser.email = req.param('email');
newUser.firstName = "firstName";
newUser.lastName = "lastName";
// save the user
newUser.save(function(err) {
if (err){
console.log('Error in Saving user: '+err);
throw err;
}
console.log('User Registration succesful');
return done(null, newUser);
});
}
});
};
// Delay the execution of findOrCreateUser and execute the method
// in the next tick of the event loop
process.nextTick(findOrCreateUser);
})
);
// Generates hash using bCrypt
var createHash = function(password){
return bCrypt.hashSync(password, bCrypt.genSaltSync(10));
}
}
UPDATE
The issue appears to be due to the presence of the proxy. The form submit works if I directly call the nodejs backend API which is running on a different port (by allowing CORS) and remove the proxy. If I insert the proxy, and make the form point to the weback dev server, then form submit does not call the my nodeJS API. However, proxying works with curl and POSTMAN. Weird how curl works and form submit doesn't. Any pointers here will be helpful.

Answer 1

try to clear browser cache . if you are using chrome
go to settings
type cache in search
browse to bottom and clear cache .
if it doesnt solve the problem please write back