尝试发出POST请求以注册新用户

时间:2017-10-13 00:32:09

标签: node.js authentication post passport.js passport-local

我正在尝试设置用户注册的功能。注册表单使用Redux表单,身份验证由passport.js处理,我使用mongoDB(mLab)作为我的用户数据库。

当我尝试注册新用户时,出现以下错误:

POST http://localhost:3000/signup 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404

动作/ index.js:

export const createUser = values => async dispatch => {
  const res = await axios.post('/signup', values);

  dispatch({
    type: CREATE_USER,
    payload: res
  });
};

authRoutes.js:

const passport = require('passport');

module.exports = app => {
  app.post(
    '/signup',
    passport.authenticate('local-signup', {
      successRedirect: '/',
      failureRedirect: '/signup',
      failureFlash: true
    }));
};

passport.js:

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const mongoose = require('mongoose');
const User = mongoose.model('users');


// Local signup strategy
passport.use('local-signup', new LocalStrategy(
  {
    usernameField: 'email',
    paswordField: 'password',
    passReqToCallback: true
  },
  (req, email, password, done) => {
    console.log(req);
    User.findOne({ 'local.email': email }, (err, user) => {
      if (err) { return done(err); }

      if (user) {
        return done(null, false, { message: 'That email already exists.' });
      } else {
        const newUser = new User({
          'local.email': email,
          'local.password': password
        }).save(err => {
          if (err) { throw err };
        });
        return done(null, newUser);
        console.log(newUser);
      }
    });
  }
));

SignUp.js:

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import validateEmail from '../../utils/validateEmail';
import FormField from './FormField';
import signUpFields from './signUpFields';
import * as actions from '../../actions';

class SignUp extends Component {
  onSubmit(values) {
    values.email = values.email.trim();
    this.props.createUser(values);
  }

  renderFields() {
    return _.map(signUpFields, ({ label, name, type }) => {
      return <Field key={name} type={type} component={FormField} name={name} label={label} />
    });
  }

  render() {
    return (
      <div>
        <h2>Sign Up</h2>
        <form onSubmit={this.props.handleSubmit(this.onSubmit.bind(this))}>
          {this.renderFields()}
          <button type='submit' className='teal btn-flat right white-text'>
            Sign Up
          </button>
        </form>
      </div>
    )
  }
}

function validate(values) {
  const errors = {};

  errors.username = validateEmail(values.username);

  if (values.password !== values.confirmPassword) {
    errors.confirmPassword = 'Must match password';
  }

  return errors;
}

SignUp = reduxForm({
  validate,
  form: 'signupForm'
})(SignUp);

export default connect(null, actions)(SignUp);

其余代码供参考:https://github.com/drhectapus/Voting-App

似乎POST请求没有通过,但不能为我的生活找出原因。任何帮助非常感谢:)

1 个答案:

答案 0 :(得分:0)

意识到我忘了在React端的package.json中创建一个代理规则(我的目录有一个嵌套在节点应用程序中的create-react-app)