Question

我对后端的请求不起作用，我不知道为什么。我有一个注册表单，我试图通过使用来自客户端的轴发布请求将数据发送到后端但它永远不会到达我的后端路由。我得到的错误是：

POST http://localhost:3000/register 404 (Not Found)

有什么想法吗？谢谢!!

服务器/ app.js

            import express from 'express';
            import path from 'path';
            import bodyParser from 'body-parser';
            import model from './model';
            import React from 'react';
            import { renderToString } from 'react-dom/server';
            import { match, RouterContext } from 'react-router';
            import routes from '../browser/src/components/routes.jsx';
            import NotFoundPage from '../browser/src/components/NotFoundPage';

            const app = express();
            module.exports = app;

            app.use(express.static('/browser'));
            app.use('/', express.static('public'));

            app.get('*', (req, res) => {
              match(
                { routes, location: req.url },
                (err, redirectLocation, renderProps) => {

                  if (err) {
                    return res.status(500).send(err.message);
                  }
                  if (redirectLocation) {
                    return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
                  }
                  let markup;
                  if (renderProps) {
                    markup = renderToString(<RouterContext {...renderProps}/>);
                  } else {
                    markup = renderToString(<NotFoundPage/>);
                    res.status(404);
                  }
                  return res.render('index', { markup });
                }
              );
            });

服务器/路由/ index.js

           router.post('/signup', function(req,res,next){
                ...

                  User.create(req.body)
                  .then(function(user) {
                    res.send(user)
                  })
            })

公共/ index.html中

  ...
     <body>
      <div id="app"><%- markup -%>
      </div>
          <script src="bundle.js" type="text/javascript"></script>
     </body>
  ...

class Signup extends React.Component{
  constructor (props){
    super(props)
    this.state={
        email:'',
        password:''
    }
    this.handleClick=this.handleClick.bind(this)
    this.send=this.send.bind(this)
}
handleClick(elm){
    this.setState({
        [elm.target.name]: elm.target.value
    })
}

send(){
   event.preventDefault();
   const logindata={
    email:this.state.email,
    password:this.state.password
   }
   axios.post('/signup', logindata )
    .then(response=>response.data)

}
render(){

return (
      <div>    
        <form onSubmit={this.send}>
           <input type="email" placeholder="Email" value={this.state.email} name="email" onChange={this.handleClick}/>
           <input type="password" placeholder="Password" value={this.state.password} name="password" onChange={this.handleClick}/>           
           <input type="submit"/>
        </form>
      </div>

    )
 }

}

我有我的路线：

class Routes extends React.Component {
  render () {   
    return (
      <main>
         <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/login' component={LoginPage}/>
            <Route path='/register' component={Register}/>
            <Route path="*" component={NotFoundPage}/>
         </Switch>
      </main>
     )
   }
}
export default Routes;

React Nodejs应用程序 - 向服务器发送请求不起作用。为什么？

0 个答案: