0

Estoy tratando de hacer un pequeño programa de inventario. Los productos los quiero añadir con un formulario en un modal, pero a la hora de enviar los datos del formulario vía fetch a mi backend hecho con Codeigniter 4, solo me llega un error 303 a pesar de que la dirección esta correcta¿Cómo puedo solucionar el error 303 y qué me lleguen los datos al backend?

Sé que sería mucho más fácil simplemente capturar los datos directamente en el backend, pero quiero repartir la tarea con el frontend para más adelante hacer cosas con esos datos.


Screenshot del header

Screenshot del header Screenshot del header2 Screenshot del header3

Código formulario

<form method="POST" action="<?php echo route_to('addProduct') ?>" id="formAddProduct">
      <div class="mb-3">
         <label for="InputNameProduct" class="form-label">Nombre del Producto</label>
         <input type="text" class="form-control" id="InputNameProduct" aria-describedby="nameProduct">
         <div id="nameProduct" class="form-text">Nombre inválido</div>
      </div>
      <div class="mb-3">
         <label for="InputSKUProduct" class="form-label">SKU</label>
         <input type="text" class="form-control" id="InputSKUProduct" aria-describedby="SKUProduct">
         <div id="SKUProduct" class="form-text">SKU inválido</div>
       </div>
       <div class="mb-3">
          <label for="InputCatProduct" class="form-label">Categoría</label>
          <input type="text" class="form-control" id="InputCatProduct" aria-describedby="CatProduct">
          <div id="CatProduct" class="form-text">Categoría inválida</div>
       </div>
       <div class="mb-3">
          <textarea name="descripProduct" id="InputDescripProduct" cols="60" rows="5" aria-describedby="DescripProduct" placeholder="Descripción"></textarea>
          <div id="DescripProduct" class="form-text">Descripción inválida</div>
       </div>
       <div class="mb-3">
          <label for="InputPrecioProduct" class="form-label">Precio</label>
          <input type="number" class="form-control" id="InputPrecioProduct" aria-describedby="PrecioProduct">
          <div id="PrecioProduct" class="form-text">Precio inválido</div>
       </div>
       <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Submit</button>
       </div>

Rutas relacionadas

$routes->group('inventario', function ($routes) {
    $routes->get('/', 'InventarioController::index',['as'=>'indexInventario']);
    $routes->post('addProduct','InventarioController::addProduct');
    $routes->get('addProduct','InventarioController::addProduct',['as' => 'addProduct']);
});

Código JS

//Asignación de variables
var formAddProduct = document.getElementById("formAddProduct");
var InputNameProduct = document.getElementById("InputNameProduct");
var InputSKUProduct = document.getElementById("InputSKUProduct");
var InputCatProduct = document.getElementById("InputCatProduct");
var InputDescripProduct = document.getElementById("InputDescripProduct");
var InputPrecioProduct = document.getElementById("InputPrecioProduct");

//Toda la programación del JS va dentro de este evento load
window.addEventListener('load',(e)=>{
    //Evento submit para el formulario de addProduct
    formAddProduct.addEventListener('submit',(e)=>{
        e.preventDefault();
        //Se añaden todos los input en este array...
        var data = {
            nameProduct:    InputNameProduct.value,
            skuProduct:     InputSKUProduct.value,
            catProduct:     InputCatProduct.value,
            descripProduct: InputDescripProduct.value,
            precioProduct:  InputPrecioProduct.value,
        }
        console.log(data);
        var dataJSON = JSON.stringify(data);
        console.log(JSON.stringify(data));
        //...y se envían por este fetch
        fetch('/inventario/addProduct', {
            method: 'POST', // or 'PUT'
            body:  dataJSON,// data can be `string` or {object}!
            headers:{
                'Content-Type': 'application/json'
            }
          }).then(res => res.text()
          )
          .catch(error => console.log('Error:', error))
          .then(text => console.log(text));
    });
});

Código correspondiente en ProductController.php

public function addProduct(){
        $data = [];
        $datos = json_decode($this->request->getPost($data));
        json_encode("ok");
}

Código correspondiente en la vista de addProduct.php <?php

$data = [];
$datos = json_decode($this->request->getPost($data), true);
echo "<pre>";
var_dump($datos);
echo "</pre>";
json_encode("ok");

8
  • Y tu pregunta es?
    – Arriel
    Commented el 24 ene. 2022 a las 21:11
  • @Arriel ¿Cómo puedo solucionar el error 303 y qué me lleguen los datos al backend?
    – kueyar
    Commented el 24 ene. 2022 a las 21:15
  • Será un problema de ambigüedad? Tienes un get y un post en la misma ruta /addProduct. Por qué? Si vas a crear un nuevo objeto, debe ser a través de POST, semánticamente es lo correcto, y es también más seguro.
    – Arriel
    Commented el 24 ene. 2022 a las 21:38
  • @Arriel pues no, de hecho lo tenía en un principio sin esa ruta GET, pero aún así me lanzaba el mismo error. Se la volví a borrar por si acaso.
    – kueyar
    Commented el 24 ene. 2022 a las 21:44
  • Por favor muéstranos el código del método addProduct
    – Arriel
    Commented el 24 ene. 2022 a las 21:53

1 respuesta 1

0

Finalmente después de horas buscando, encontré que el problema estaba en el archivo filters.php en la carpeta config. Tenía activado el CSRF y eso provocaba el redireccionamiento

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.