PHP, React, MySQL database contact form error

Question

I am making a simple landing page using react and php mysql. I want to post inquiries into the php database. I am able to display the response object in the front end console; I am experiencing an error attempting to submit contact form information into a database. My front end is written using react and currently console logs the state object that I want to post into my MySQL datatbase. My database columns are:

FRONT END CODE:

This is where I am console logging the results; I am experiencing an error in my network saying "Failed to load response data"

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;

BACK END CODE: I've imported the connection which connects to my localhost on port 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

change

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

To

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

You're likely getting an SSL cert error because you don't have an SSL cert