CORS en CodeIgniter 4, la forma fácil - 08

Vamos a configurar los CORS en C4 de una manera sencilla.

Vamos a ver cómo podemos conectarnos a la API Rest en CodeIgniter desde un proyecto externo, en este ejemplo, sería la aplicación creada en Vue.

Hay muchas formas de configurar los CORS en CodeIgniter 4, vamos a ver la formas más sencilla que sería modificando el archivo de public/index.php:

public\index.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
***

Que es la que usaremos al menos de momento por su sencillez; en las líneas anteriores estamos indicando que desde cualquier origen (*):

header('Access-Control-Allow-Origin: *');

Pueda realizar peticiones HTTP; obviamente esto es muy riesgoso y solamente dejaremos esta configuración al estar en modo de desarrollo, pero el * significa todo los lugare; también puedes colocar el dominio de desarrollo:

header('Access-Control-Allow-Origin: http://localhost:5173');

Con la segunda línea:

header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

Indicamos los tipos de métodos HTTP permitidos, aunque según pruebas, puedes prescindir de la segunda línea. Con esto, ya, verás que ya no devuelve el error anterior.

Como veremos más adelante, al enviar una petición de tipo POST, PUT, PATCH, aparece nuevamente el error anterior, esto se debe a que se envía una petición previa a la del POST llamada preflight, que verifica la configuraciones de los CORS y la cual, debe de tener una configuración como la siguiente:

public\index.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
***
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
   header('Access-Control-Allow-Origin: *');
   header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
   header('Access-Control-Allow-Headers: token, Content-Type');
   header('Access-Control-Max-Age: 1728000');
   header('Content-Length: 0');
   header('Content-Type: text/plain');
   die();
}

Que prácticamente no existen fíjate Ya el tiempo que tiene sin actualizar y demás y en principio con este paquete ya podíamos configurarlos fácilmente aunque no sé si este es para el tres No aquí dice cuatro ahí lo instalamos seguimos agregamos en este caso segía un filtro indicamos Cuáles van a ser las rutas de nuestra Api y bueno sería prácticamente todo y ahí lo pudiéramos emplear sin ningún problema pero no hace falta es un paquete desactualizado por lo tanto si no lo actualiza yo yo desaconsejo su uso porque estás empleando un paquete sin mantenimiento Y en algún punto te va a fallar pero fíjate que 

https://github.com/agungsugiarto/codeigniter4-cors

A partir de la versión 4.5.0 es decir bastante adelantado una vez salido a la 4 decidieron implementar el uso de los CORS y aquí es por eso que digo que a veces CodeIgniter es un framework un poquito extraño en ese sentido esta configuración la haremos más adelante pero otra vez como está sencilla simplemente era literalmente agregar una línea de código entonces preferí no complicarme mucho con esto que tampoco que sea muy complicado pero fíjate que es similar al paquete:

https://codeigniter.com/user_guide/libraries/cors.html

CORS en CodeIgniter 4, la forma correcta

Ya finalmente terminada la implementación con viw al menos la parte que yo quería implementar lo siguiente que vamos a querer hacer sería configurar los cors de la manera correcta se pudiera decir así que para eso como te comentaba es una característica que no salió de base cuando sale CodeIgniter 4 tal cual indica por acá salió a partir de la versión 4. 5 aquí un poquito de críticas antes de mostrar implementación, quiero comentar algunas cosas.

Recuerda comentar o remover la implementación que mostramos arriba para probar esta implementación.

Esta parte de la documentación es un poco abstracto y la documentación no ayuda entonces entiendo queé es lo que yo está indicando por acá lo que era el prel request es decir el la petición antes de la petición otra vez antes de hacer esta petición por ejemplo esta de películas hace una solicitud previa según las pruebas que hicimos anteriormente que fue cuando configuramos el resto aquí de los header en nuestro Index entonces entiendo yo que es eso por qué no los pide no debería se supone que debería hacerlo de manera interna Pero bueno así funciona no sé un poco mi opinión te voy dando aquí un poquito mi opinión y también la implementación.

empleada por Vue:

app/Config/Cors.php

'allowedOrigins' => ['http://localhost:5173'],

O si quieres que sea abierta para todas las rutas:

app/Config/Cors.php

'allowedOrigins' => ['*'], // Allows any origin.

Crear un agrupado para tus rutas para la API y el middleware de los CORS:

app/Config/Routes.php

$routes->group('', ['filter' => 'cors'], static function (RouteCollection $routes): void {
  
   $routes->group('api', ['namespace' => '\App\Controllers\Api'], function ($routes) {
       $routes->resource('pelicula');
       $routes->resource('categoria');
   });
   
   $routes->options('api/(:any)', static function () {});
});

Esta ruta:

$routes->options('api/(:any)', static function () {});

Es para los Preflight Requests, es decir, una petición de control antes de las peticiones que hacemos nosotros a la API.

También, debes de exponer los métodos que van a poder ser empleados:

app/Config/Cors.php

'allowedMethods' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],

También puedes probar mediante:

app/Config/Routes.php

$routes->group('', ['filter' => 'cors'], static function (RouteCollection $routes): void {
  
   $routes->group('api', ['namespace' => '\App\Controllers\Api'], function ($routes) {
       $routes->resource('pelicula');
       $routes->resource('categoria');
   });
   $routes->options('api/(:any)', static function () {
       // Implement processing for normal non-preflight OPTIONS requests,
       // if necessary.
       $response = response();
       $response->setStatusCode(200);
       $response->setHeader('Allow:', 'OPTIONS, GET, POST, PUT, PATCH, DELETE');

       return $response;
   });
   // $routes->options('api/(:any)', static function () {});
});

15-02-2025 - Andrés Cruz

In english

• Categoría
• /
• CodeIgniter
• /
• CORS en CodeIgniter 4, la forma fácil - 08