Axios POST请求不起作用

Question

我正在使用Axios将POST请求发送到Node.js服务器，但是它不起作用。你有解决的办法吗？

我的代码如下所示：

server.js：

app.post('/registration', (req, res) => {
  console.log(req.body);
});

我的班级：

export default class Registration extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {}
  }
  handleSubmit (e) {
    e.preventDefault;
    axios.post('/registration', {name: document.getElementById('name') }).then(res => {
      console.log(res);
    })
    }
  render() {
    return (<form className="registrationForm">
      <input type="text" name="name" id="name" required="required" placeholder="name"/>
      <br/>
      {/*<input type="text" name="email" required="required" placeholder="email"/>
      <br/>
      <input type="number" name="phoneNumber" required="required" placeholder="phoneNo"/>
      <br/>
      <input type="password" name="password" required="required" placeholder="pass"/>
      <br/> */}
      <button className="registerButton" onClick={this.handleSubmit}>register</button>
    </form>)
  };
}

Answer 1

您的代码中存在各种问题

• preventDefault是方法。您需要调用它
• 我怀疑您要将DOM元素发送到服务器
• 您想使用catch
处理网络故障

更正后的handleSubmit应该看起来像这样

handleSubmit (e) {
    e.preventDefault(); // NB
    const data = {name: document.getElementById('name').value /* NB */ };

    axios.post('/registration', data).then(res => {
      console.log(res);
    }).catch(console.error) // now you could see what the actual problem is
  }

此外，通常不建议在React up中使用DOM查找方法。您最好保留对输入的引用。

<input ... ref={input => this.name = input}/>
const data = {name: this.name.value };

Answer 2

问题出在我仅在服务器端应用程序中未写的一行。 唯一要检查的是在文件中要求body-parser之后放置以下行。

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));