2017-10-13 119 views
1

我正在嘗試設置用戶註冊的功能。註冊表單使用Redux表單,身份驗證由passport.js處理,我爲我的用戶數據庫使用mongoDB(mLab)。嘗試發出POST請求註冊新用戶時出現404錯誤

當我嘗試註冊新用戶,我得到以下錯誤:

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請求無法得到處理,但不能爲我的生命找出原因。任何幫助非常感謝:)

回答

0

意識到,我忘記了創建的陣營側的package.json代理規則(我的目錄有創建反應的應用程序內嵌套在一個節點應用程序內)

+0

哎@ cryptofish123我有類似的問題,但在我的package.json中添加一個「代理」在客戶端部分沒有幫助。你是否還在服務器端添加了一個代理服務器:true? – jessi

+0

@jessi是否將新用戶保存到數據庫? – doctopus

+0

哦,我解決了這個問題,並忘記了這一點。事實證明,我有代理,但我忘記了設置body_parser – jessi

相關問題