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