PHP、React、MySQL 数据库联系表单错误

Question

我正在使用 react 和 php mysql 制作一个简单的登录页面。我想将查询发布到 php 数据库中。我能够在前端控制台中显示响应对象；我在尝试将联系表单信息提交到数据库时遇到错误。我的前端是使用 react 编写的，当前控制台记录了我想发布到我的 MySQL 数据库中的状态对象。我的数据库列是：

前端代码：

这是我在控制台记录结果的地方；我的网络出现错误提示“无法加载响应数据”

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

const url = "https://localhost:8080/react-php/insert.php";

class Form extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      message: "",
      formError: false,
      error: null
    };
  }

  handleFormSubmit = e => {
    e.preventDefault();

    if (
      this.state.name === "" ||
      this.state.email === "" ||
      this.state.message === ""
    ) {
      this.setState({
        formError: true
      });
      return false;
    } else {
      this.setState({
        formError: false
      });
      const obj = {
        name: this.state.name,
        email: this.state.email,
        message: this.state.message
      };
      console.log(obj);
      axios
        .post(url, obj)
        .then(res => console.log(res.data))
        .catch(error => this.setState({ error: error.message }));

      this.setState({
        name: "",
        email: "",
        message: ""
      });
    }
  };

  // Functions to  get the input values
  getName = e => {
    let name = e.target.value;
    this.setState({
      name: name
    });
    console.log(this.state.name);
  };

  getEmail = e => {
    let email = e.target.value;
    // eslint-disable-next-line no-useless-escape
    if (
      email.match(
        /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
      )
    ) {
      this.setState({
        email: email
      });
    } else {
      this.setState({
        email: ""
      });
      console.log("Incorrect e-mail, must match expression");
    }

    console.log(this.state.email);
  };

  getMessage = e => {
    let message = e.target.value;
    this.setState({
      message: message
    });
    console.log(this.state.message);
  };

  render() {
    return (
      <form id="contact">
        {/* I am just sending a basic error message */}
        {this.state.formError && (
          <p className="error">Fill all the input fields please.</p>
        )}
        {/* <p>Fill in the next form to send us a message</p> */}
        <div>
          <label htmlFor="name">Name</label>
          <input
            type="text"
            name="name"
            placeholder=""
            onChange={this.getName}
            value={this.state.name}
          />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            name="email"
            placeholder=""
            onChange={this.getEmail}
            value={this.state.email}
          />
        </div>
        <div>
          <label htmlFor="name">Message</label>
          <textarea
            onChange={this.getMessage}
            maxLength="450"
            value={this.state.message}
          ></textarea>
        </div>
        <div>
          <p>We will answer as soon as possible</p>
          <input
            type="submit"
            name="submit"
            value="Send"
            onClick={this.handleFormSubmit}
          />
        </div>
      </form>
    );
  }
}

export default Form;

后端代码： 我已经在端口 8080 上导入了连接到我的本地主机的连接。

<?php
require 'connect.php';


header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
$postdata = file_get_contents("php://input");

if(isset($postdata) && !empty($postdata)){

    $request = json_decode($postdata);


    $name=$request->name;
    $email=$request->email;
    $message=$request->message;

}

$query = mysqli_query($con, "INSERT INTO `users` (`id`, `name`, `email`, `message`) VALUES (NULL, '{$name}', '{$email}', '{$message}')");
echo "Error: " . mysqli_error($con);


if(mysqli_query($con, $query)){
    http_response_code(201);
}else{
    http_response_code(422);

}

Answer 1

改变

const url = "https://localhost:8080/react-php/insert.php"

到

const url = "http://localhost:8080/react-php/insert.php"

您可能会收到 SSL 证书错误，因为您没有 SSL 证书