Tutorial CRUD CodeIgniter 4 & Vue JS #3 - Enable CORS CodeIgniter 4

• Langkah 1 - Membuat FilterInterface
• Langkah 2 - Register Config FilterInterface
• Source Code

Halo teman-teman semuanya pada kesempatan kali ini kita akan belajar bagaimana cara enable CORS di CodeIgniter 4, CORS merupakan singkatan dari Cross Origin Resource Sharing, yaitu sebuah teknik menggunakan permintaan HTTP untuk mengizinkan browser pada suatu domain mendapatkan akses ke server pada sumber yang berbeda.

Ini digunakan agar Retful API yang sudah kita buat sebelumnya bisa digunakan atau bisa di akses oleh aplikasi lain seperti aplikasi Android atau Front-End Developer. Pada studi kasis kali ini kita akan akses API kita dari aplikasi Vue Js.

Di Codeigniter 4 kita akan memanfaat FilterInterface untuk menangani masalah CORS ini. Langsung saja kita mulai.

Langkah 1 - Membuat FilterInterface

Silahkan teman-teman buat file baru dengan nama Options.php di dalam folder app/FIlters/ dan kemudian masukkan kode berikut ini :

<?php namespace App\Filters;

use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;

Class Options implements FilterInterface
{
    public function before(RequestInterface $request)
    {
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
        $method = $_SERVER['REQUEST_METHOD'];
        if ($method == "OPTIONS") {
        die();
        }
    }

    public function after(RequestInterface $request, ResponseInterface $response)
    {
      // Do something here
    }
}

Di atas kita menambahkan beberapa kode untuk menangani masalah CORS di dalam function before, setelah kita menambahkan FilterInterface sekarang kita akan lanjutkan untuk register FilterInterface ini di dalam config.

Langkah 2 - Register Config FilterInterface

Sekarang silahkan teman-teman buka file app/Config/Filters.php kemudian daftarkan di dalam properties $aliases kurang lebih menjadi seperti berikut ini :

public $aliases = [
  'csrf'     => \CodeIgniter\Filters\CSRF::class,
  'toolbar'  => \CodeIgniter\Filters\DebugToolbar::class,
  'honeypot' => \CodeIgniter\Filters\Honeypot::class,
  'options' => \App\Filters\Options::class,
];

Di atas kita menambahkan untuk handle CORS.

'options' => \App\Filters\Options::class,

Kemudian setelah itu kita akan daftarkan ke dalam properties $global di dalam array before, ini digunakan agar sebelum semua request di aplikasi kita dijalankan maka akan menjalankan FilterInterface ini. Kurang lebih menjadi seperti berikut ini :

public $globals = [
   'before' => [
      'options' //register option CORS
      //'honeypot'
      //'csrf',
    ],
       'after'  => [
        'toolbar',
        //'honeypot'
    ],
];

Sekarang kita sudah bisa menggunakan RESTFul API kita di dalam aplikasi lain, dan di langkah selanjutnya kita akan mencoba menggunakan API ini di dalam project Vue Js.

Source Code

CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API

Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter

Terima Kasih