时间戳

首页 > 解决方案 > Axios 帖子给我一个错误：内部服务器错误

mysql - Axios 帖子给我一个错误：内部服务器错误

问题描述

我正在使用 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;

标签： mysqlnode.jsreactjsaxios

解决方案

根据您的 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}`);
});

推荐阅读