Axios 帖子给我一个错误：内部服务器错误答案

【问题标题】：Axios post is giving me an error: Internal server ErrorAxios 帖子给我一个错误：内部服务器错误
【发布时间】：2020-02-22 16:48:59
【问题描述】：

我正在使用 Axios 进行发布请求并给我这个错误：

xhr.js:178 POST http://localhost:3000/dependentes 500（内部服务器错误）

我看到有人问过这个问题，但他们的解决方案都不适合我！我不知道是这个组件有问题还是我的服务器端有问题。

import React, { Component } from "react";
import axios from "axios";

class LogIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChangeEmail = this.handleChangeEmail.bind(this);
    this.handleChangePass = this.handleChangePass.bind(this);
  }

  handleChangeEmail = e => {
    this.setState({ email: e.target.value });
    //console.log(e.target.value);
  };

  handleChangePass = e => {
    this.setState({ password: e.target.value });
    //console.log(e.target.value);
  };

  handleSubmit = e => {
    /*this.props.history.push('/');
        console.log(this.props);*/

    event.preventDefault();

    let data = JSON.stringify({
      email: this.state.email,
      password: this.state.password
    });
    let url = "http://localhost:3000/dependentes";
    const response = axios.post(url, data, {
      headers: { "Content-Type": "application/json" }
    });
  };

  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
          <h5 className="grey-text text-darken-3">Log In</h5>
          <div className="input-field">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              onChange={this.handleChangeEmail}
              value={this.state.email}
            />
          </div>
          <div className="input-field">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              id="password"
              onChange={this.handleChangePass}
            />
          </div>
          <div className="input-field">
            <button className="btn orange lighten-1 z-depth-0">Log In</button>
          </div>
        </form>
      </div>
    );
  }
}

export default LogIn;

【问题讨论】：

就是服务器返回的，需要修复服务器不响应ui。看起来您正在发送响应 ui 服务器的请求，您是否更改了默认端口？
你的localhost:3000 是什么，默认情况下 localhost:3000 被前端使用，如反应。所以..你posting 到你的前端路线吗？或者你有任何代理设置或反向 nginx 代理？
我用 nodejs 在 3000 端口上创建了一个服务器。我只是将端口更改为 4000，反应现在在端口 3000 上
反应在哪里运行？您是否更改了默认的反应端口（也是 3000）？
所以，然后编辑问题，在此处添加此信息。还要发布 node.js 后端代码。你加了cors吗？否则将无法连接。

标签： mysql node.js reactjs axios

【解决方案1】：

根据您的 node.js 代码，您没有使用 body-parser，这就是为什么从 req.body 接收电子邮件会引发错误，因为 req.body 未定义。

另外，如果您不返回像 res.send 或 res.json 这样的请求，由于请求未关闭，它将始终从前端超时。

所以，编辑你的代码

//installed express, mysql, cors

const config = require('./database/config');
const express = require('express');
const cors = require('cors');
const port = 4000;
const app = express();
const mysql = require('mysql');
const bodyParser = require('body-parser'); // <=== this line
app.use(cors());
app.use(bodyParser.json()); //<=== This line

const SELECT_ALL_ADDICTS_QUERY = 'SELECT * FROM viciados';

const connection = mysql.createConnection(config.mysql);

connection.connect(err => {
  if (err) {
    return err;
  }
});

app.get('/', (req, res) => {
  res.send('Homepage. Go to /dependentes para ver os dependentes no sistema');
  res.end();
});

app.get('/dependentes', (req, res) => {
  connection.query(SELECT_ALL_ADDICTS_QUERY, (err, results) => {
    if (err) {
      res.send(err);
    } else {
      res.json({
        data: results
      });
    }
  });
});

app.post('/dependentes', (req, res) => {
  console.log(req.body.email);
  res.json({ email: req.body.email }); ///<== and this line
});

app.listen(port, err => {
  return err
    ? console.log(`error founded: ${err}`)
    : console.log(`server runnning on port: ${port}`);
});

【讨论】：