POST data to php file via reactjs axios - reactjs

Question

I am trying to post data to a php file that is two file levels higher relative to the .js file. I am new to reactjs and not entirely familiar with axios so bear with me.
ReactJS code
onSubmit=(e)=>{
e.preventDefault();
alert(this.state.username);
axios.post('../../connections/submit.php',{
username:this.state.username
}).then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
});
};
The PHP file in question:
if(isset($_POST) && !empty($_POST)){
$data = json_decode(file_get_contents("php://input"), true);
$username = $data['username'];
print_r($username);
$conn=mysqli_connect("localhost","root","","jwt_test");
$sqlOrder="INSERT INTO user(u_id,username) VALUES(NULL,'$username')";
$conn->query($sqlOrder);
$conn->close;
};
Is this the correct way of posting the data? I am returned a 404 error code stating that it could not find my file.
My file structure is as so:
-connections
-submit.php
-src
-components
-submit.js
If it helps, I imported axios in my submit.js file instead of in the App.js file.
Any advice would be much appreciated. Thanks for reading.

Answer 1

I've got it to work. For the reactjs file, this is the code:
onSubmit=(e)=>{
e.preventDefault();
alert(this.state.username);
//!!! need to stringify the payload before sending it to phpmyadmin.
var payload = {
username:this.state.username
};
axios.post('http://localhost/connections/submit.php',
JSON.stringify(payload)).then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
});
};
The receiving PHP file:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
if(isset($_POST) && !empty($_POST)){
$data = json_decode(file_get_contents("php://input"), true);
$username = $data['username'];
$conn=mysqli_connect("localhost","root","","jwt_test");
$stmt = $conn->prepare("INSERT INTO user(u_id,username) VALUES(NULL,?)");
$stmt->bind_param('s',$username);
$stmt->execute();
$conn->close;
};
What was needed were the two headers in the PHP file, encoding the payload in JSON , and using another server to receive the payload, in this case, XAMPP was used.