Estoy tratando de hacer un formulario de contacto básico en React con un arhivo simple de php. Estoy usando también Axios para conectar el front con el back, pero no sé porqué me devuelve el estado 400 y un "Cannot POST /home/api/contact.php" pero no sé porqué. ¿Me podrán ayudar? No entiendo qué estoy haciendo mal.
Este es mi componente
const SectionContact = ({sectionData, className}) => {
const API_PATH = 'http://localhost:3000/yasmin-hiasche/api/contact.php';
const sendMail = async e => {
e.preventDefault();
let infoMail = {
name: e.target.[0].value,
email: e.target.[2].value,
text: e.target.[4].value,
};
await axios({
method: 'post',
url: `${API_PATH}`,
headers: { 'content-type': 'application/json' },
data: infoMail
})
};
return(
<form className={`${classes.root} ${className}`} autoComplete="on" onSubmit={(e)=>sendMail(e)}>
(...*inputs*...)
<Button variant="outlined" type='submit' >Enviar</Button>
</form>
)
}
export default SectionContact;
y este mi script de php
<?php
header("Access-Control-Allow-Origin: *");
$rest_json = file_get_contents("php://input");
$_POST = json_decode($rest_json, true);
if ($_POST)
{
// set response code - 200 OK
http_response_code(200);
$subject = $_POST['infoMail.name'];
$to = "[email protected]";
$from = $_POST['infoMail.email'];
// data
$msg = $_POST['infoMail.text'];
// Headers
$headers = "MIME-Version: 1.0\r\n";
$headers.= "Content-type: text/html; charset=UTF-8\r\n";
$headers.= "From: <" . $from . ">";
mail($to, $subject, $msg, $headers);
// echo json_encode( $_POST )
echojson_encode(array(
"sent" => true
));
}
else
{
// tell the user about error
echojson_encode(["sent" => false, "message" => "Something went wrong"]);
}
?>
y la imagen de mi routeo: