Getting 404 error when trying to make POST request to sign up new user

Question

I'm trying to setup a feature where user signs up. The sign up form uses Redux Form, authentication is handled by passport.js and I'm using mongoDB (mLab) for my user DB.

When I try to sign up new user, I get the following error:

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

actions/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);

Rest of code for reference: https://github.com/drhectapus/Voting-App

Seems like the POST request is not going through, but can't for the life of me figure out why. Any help greatly appreciated :)

Answer 1

意识到我忘了在React端的package.json中创建代理规则（我的目录具有嵌套在节点应用中的create-react-app）