Tengo una pequeña App web realizada con ReactJS ya que estoy aprendiendo sobre dicho framework.
Por ahora sólo es una app donde puedes registrar actividades, visualizarlas, marcarlas como realizadas y borrarlas. El problema está en los último, en borrar.
Mediante peticiones con axios puedo obtener y crear datos nuevos, así como actualizar los mismos (cuando marco una tarea como realizada), pero cuando trato de realizar axios.delete
no consigo la manera de poder enviar y recibir los datos sin que haya algún problema.
Mi backend está codificado en PHP puro (o sea, no uso Laravel ni ningún otro framework PHP), y cuando pulso el botón en mi frontend para eliminar el dato me da error de CORS aún cuando las cabeceras están descritas en el código PHP que debería recibir la petición delete de axios.
Aquí el código, cualquier duda espero sus comentarios a fin de aclararles mejor el problema y así llegar a una solución ya que esto me está volviendo loco.
deleteTask = async(id) => {
const tasks = this.state.tasks.filter(task => task.id !== id);
this.setState({
tasks: tasks
})
await axios.delete(url + `delete/${id}`)
.then(res => {
console.log(res.data)
})
.catch(error => {
console.log(error.message)
})
}
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept,
Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, DELETE");
require_once('../modelo/conexion.php');
require_once('../modelo/consultas.php');
$data = json_decode(file_get_contents("php://button")); //El id es enviado por un botón puesto en la lista donde se muestran las tarea
if($data){
$id = $data -> id;
$consulta = new Consultas();
$consulta -> delete($id);
} else {
echo json_encode('An error has been ocurred in task delete petition. Please, try again.' . $data -> id);
}
?>
ACTUALIZACIÓN
Resolví todo (de alguna extraña manera) cambiando el php//button
por php//input
y editando la línea del método axios.delete
a await axios.delete(url + 'delete/', {data: { id: id }})
.
php://input
se refiere a la recepción de datos en una petición y nada tiene que ver con elementos HTML; para este tipo de peticiones, siempre esinput
(entrada, en inglés), no puede ser button, div ni nada parecido. Lo segundo tampoco es extraño, porque con la edición ya estás enviando un JSON válido.