使用nodejs后端

时间:2017-11-30 18:25:43

标签: node.js reactjs passport.js passport-local

我正在使用以下堆栈:

  • 阵营
  • PassportJS
  • 的NodeJS
  • 快递和快递会议
  • create-react-app with webpack dev server将API请求代理到我的节点服务器,如article
  • 所述

当我进行表单提交时,我收到错误无法POST但是当我使用POSTMAN或curl XPOST提交到SAME网址时,我得到了结果。这是我的server.js代码:

'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}!`);
});

表格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(" "))} <a href="#">{constants.tos_txt.substr(constants.tos_txt.indexOf(" ") + 1)}</a>
                            </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

注册护照策略

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));
    }

}

更新

问题似乎是由于代理的存在。如果我直接调用在不同端口上运行的nodejs后端API(通过允许CORS)并删除代理,则表单提交有效。如果我插入代理,并使表单指向weback dev服务器,则表单提交不会调用我的nodeJS API。但是,代理与curl和POSTMAN一起使用。很奇怪curl如何工作和表单提交没有。这里的任何指示都会有所帮助。

1 个答案:

答案 0 :(得分:-1)

尝试清除浏览器缓存。如果你正在使用chrome

  1. 转到settings
  2. 在搜索中输入cache
  3. 浏览到底部并清除缓存。 如果它没有解决问题,请回信