title: Cannot POST error on form submit with nodejs backend
body: <p>I am using the following stack :</p>
  
  <ul>
  <li>React</li>
  <li>PassportJS</li>
  <li>NodeJS</li>
  <li>Express and express-session</li>
  <li>create-react-app with webpack dev server proxying API requests to my node server as mentioned in this <a href="https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/" rel="nofollow noreferrer">article</a></li>
  </ul>
  
  <p>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 :</p>
  
  <pre><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(() =&gt; console.log('connection with database succeeded'))
  .catch(err =&gt; 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, () =&gt; {
    console.log(`App listening on port ${PORT}!`);
  });
  </code></pre>
  
  <p>Form PAGE :</p>
  
  <pre><code>import React, { Component } from 'react';
  import constants from 'constants/AuthPageConstants';
  
  class RegisterForm extends Component {
      render() {
          return (
              &lt;div className="tab-pane fade in" id="basic-tab2"&gt;
                  &lt;form action="/signup" method="POST"&gt;
                      &lt;div className="text-center"&gt;
                          &lt;div className="icon-object border-success text-success"&gt;&lt;i className="icon-plus3"&gt;&lt;/i&gt;&lt;/div&gt;
                          &lt;h5 className="content-group"&gt;{constants.register_form_title} &lt;small className="display-block"&gt;{constants.register_form_subtitle}&lt;/small&gt;&lt;/h5&gt;
                      &lt;/div&gt;
  
                      &lt;div className="form-group has-feedback has-feedback-left"&gt;
                          &lt;input type="text" name="username" className="form-control" placeholder={constants.register_username_placeholder} /&gt;
                          &lt;div className="form-control-feedback"&gt;
                              &lt;i className="icon-user-check text-muted"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div className="form-group has-feedback has-feedback-left"&gt;
                          &lt;input type="password" name="password" className="form-control" placeholder={constants.register_password_placeholder} /&gt;
                          &lt;div className="form-control-feedback"&gt;
                              &lt;i className="icon-user-lock text-muted"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div className="form-group has-feedback has-feedback-left"&gt;
                          &lt;input type="text" name="email" className="form-control" placeholder={constants.register_email_placeholder} /&gt;
                          &lt;div className="form-control-feedback"&gt;
                              &lt;i className="icon-mention text-muted"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div className="content-divider text-muted form-group"&gt;&lt;span&gt;Additions&lt;/span&gt;&lt;/div&gt;
  
                      &lt;div className="form-group"&gt;
                          &lt;div className="checkbox"&gt;
                              &lt;label&gt;
                                  &lt;input type="checkbox" className="styled" /&gt;
                                  {constants.tos_txt.substring(0, constants.tos_txt.indexOf(" "))} &lt;a href="#"&gt;{constants.tos_txt.substr(constants.tos_txt.indexOf(" ") + 1)}&lt;/a&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;button type="submit" className="btn bg-indigo-400 btn-block"&gt;Register &lt;i className="icon-circle-right2 position-right"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }
  export default RegisterForm
  </code></pre>
  
  <p>Signup passport strategy</p>
  
  <pre><code>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));
      }
  
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>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.</p>