-1

My xampp servers are running perfectly. I can run phpmyadmin without any problem, and I can access insert.php in the web, but I can't send data to it:

import React, { useState } from 'react';
import './Register.css';
import axios from 'axios';
import { useHistory } from "react-router-dom";


const Register = () => {
        let history = useHistory();
        const [data, setData] = useState({
            first_name: "First Name",
            last_name: "Last Name",
            postal_code: "Postal Code",
            email: "Email",
            password: "Password",
            confirm_password: "Confirm Password",
        })
        const handleChange=(e)=>{
            setData({ ...data, [e.target.name]: e.target.value});
        }
        axios.defaults.withCredentials = true;
        const submitForm = (e) => {
            e.preventDefault();
            const sendData = {
                first_name: data.first_name,
                last_name: data.last_name,
                postal_code: data.postal_code,
                email: data.email,
                password: data.password,
                confirm_password: data.confirm_password,
            }
            console.log(sendData)
            axios.post('http://localhost/8080/react-login/insert.php', sendData)
                .then((result) => {
                    if(result.data.Status === 'Invalid') {
                        alert('Invalid User');
                    }
                    else {
                        history(`/dashboard`);
                    }
                })
        }
        return (
            <div className="register">
                <form className="register__card" onSubmit={submitForm} >
                    <div className="register__header">Register</div>
                    <div className="register__form">
                        <input className="register__input" name="first_name" placeholder={data.first_name} onChange={handleChange} />
                        <input className="register__input" name="last_name" placeholder={data.last_name} onChange={handleChange} />
                    </div>
                 </form>
            </div>

Slso I have created a database table in phpmyadmin, I have added this in it's sql: SELECT * FROM `register` insert.php:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: access");
header("Access-Control-Allow-Methods: 'POST'");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

$data = json_decode("php://input");
$first_name = $data->first_name;
$last_name = $data->last_name;
$postal_code = $data->postal_code;
$email = $data->email;
$password = $data->password;
$confirm_password = $data->confirm_password;

$con = mysqli_connect("localhost:3306", "root", "", "react-login") or die("unable");
mysqli_select_db($con, "react-login");


if($first_name && $last_name && $postal_code && $email && $password && $confirm_password) {
    $sql = "insert into register(
         first_name,
         last_name,
         postal_code,
         email,
         password,
         confirm_password
)
values(
       '$first_name',
       '$last_name',
       '$postal_code',
       '$email',
       '$password',
       '$confirm_password',
)";
    $result = mysqli_query($con, $sql);

    if($result) {
        $response['data']=array(
            'status'=>'valid'
        );
        echo json_encode($response);
    }
    else {
        $response['data']=array(
            'status'=>'invalid'
        );
        echo json_encode($response);
    }
}


?>

My console also displays another error with my axios:

Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
  • 3
    Looks like you want localhost port 8080, so `http://localhost:8080/react-login/insert.php` Colon, not slash, between server and port. – James Sep 27 '22 at 17:39
  • **Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) – Dharman Sep 28 '22 at 07:47

1 Answers1

0

Looks like you are using wrong url and want to connect localhost port 8080 http://localhost/8080/react-login/insert.php change slash to colon http://localhost:8080/react-login/insert.php

Sanidhya
  • 152
  • 2
  • 11