4 Cara Ampuh Mengatasi Error CORS di Codeigniter 4

mengatasi error cors di codeigniter 4

Saat mengembangkan sebuah aplikasi web dimana terdapat sisi frontend dan backend, sering kali kita sebagai pengembang dihadapkan dengan masalah cors.

Yang akibatnya di sisi frontend tidak dapat mengambil data berupa response yang dihasilkan oleh sisi backend.

Jika saat ini kamu sedang mengalami masalah cors, di artikel ini akan dibahas secara mendalam tentang CodeIgniter 4 CORS.

Dimulai dari pengertian tentang CORS, dan bagaimana mengatasi masalah error CORS ketika mengembangkan aplikasi web dengan codeigniter 4.

Mari kita mulai dengan pemahaman dasar.

Apa Itu CORS?

CORS, singkatan dari Cross-Origin Resource Sharing, adalah mekanisme keamanan yang digunakan oleh peramban web untuk mengontrol permintaan yang datang dari sumber daya berbeda di domain yang berbeda.

Ini adalah langkah penting dalam melindungi pengguna dari ancaman keamanan seperti cross-site request forgery (CSRF) dan cross-site scripting (XSS).

Biasanya secara default, browser memang akan menghalangi pertukaran data untuk tujuan keamanan, guna menghindari potensi serangan XSS (Cross-Site Scripting) yang bisa dilakukan oleh pihak yang tidak bertanggung jawab.

Sebagai contoh, anggaplah kita memiliki website contoh1.com yang mencoba mengambil data API dari website contoh2.com menggunakan JavaScript, baik melalui metode POST atau GET. Apabila contoh2.com menerapkan kebijakan CORS (Cross-Origin Resource Sharing), maka browser akan menampilkan pesan kesalahan.

Tetapi, jika kedua situs memiliki nama domain yang sama dan tidak mengaktifkan kebijakan CORS, maka pesan kesalahan tersebut tidak akan muncul.

Bagaimana?

Dari penjelasan diatas saya harap kamu bisa memahami penjelasan tentang apa itu cors dan bagaimana cara kerjanya.

Selanjutnya kita akan langsung saja ke tutorial mengatasi error cors di codeigniter 4.

Mengatasi Error CORS di CodeIgniter 4

Kita dapat mengatasi masalah CORS (Cross-Origin Resource Sharing) di CodeIgniter 4 dengan beberapa cara yang berbeda, tergantung pada situasi yang kita alami.

Berikut adalah beberapa cara yang umum digunakan untuk mengatasi error CORS di CodeIgniter 4:

1. Menggunakan Library Eksternal

Dalam mengatasi CORS, kita dapat menggunakan library eksternal seperti “codeigniter4-cors” yang tersedia di GitHub.

Dimana ini merupakan library yang dapat membantu kita untuk memperbaiki masalah cors yang kita alami.

Library ini merupakan buatan dari developer agung sugiarto dan kita dapat menggunakan secara gratis karena memiliki lisensi open source dari MIT.

Berikut cara penggunaannya:

Install library codeigniter4-cors

Pertama kita perlu unntuk menginstall librarynya menggunakan Composer di terminal dengan perintah:

composer require agungsugiarto/codeigniter4-cors

Setelah instalasi berhasil, selanjutnya kita akan melakukan pengaturan sesuai kebutuhan untuk penggunaan librarynya.

Apakah untuk semua route di codeigniter 4 atau hanya route tertentu saja yang di aplikasikan untuk kebijakan cors ini.

Mengatur settingan library CORS

Dalama dokumentasi librarynya terdapat 4 cara berbeda yang dapat kita lakukann untuk implementasi pengaturan cors di codeigniter 4, sebagai berikut:

Penggunaan Secara Global: Untuk mengizinkan CORS untuk semua rute dalam aplikasi kita, maka kita perlu mendaftarkan filter CorsFilter.php pada bagian paling atas properti $aliases dalam kelas App/Config/Filter.php.
Ini nantinya akan mempengaruhi semua route dalam aplikasi kita.
```
public $aliases = [
    'cors' => \Fluent\Cors\Filters\CorsFilter::class,
    // ...
];
```
Pembatasan Penggunaan Secara Global: Kita juga dapat membatasi rute-rute tertentu berdasarkan pola URI mereka dengan mengedit app/Config/Filters.php dan menambahkannya ke dalam array $filters. Misalnya, kita dapat membatasi CORS untuk rute-rute tertentu yang berada di bawah direktori ‘api/‘.
```
public $filters = [
    // ...
    'cors' => [
        'before' => ['api/*'],
        'after' => ['api/*']
    ],
];
```
Pembatasan Penggunaan pada Route Tunggal: Kita dapat membatasi CORS untuk rute tunggal dengan menambahkan opsi filter pada parameter terakhir dalam salah satu metode definisi rute. Dalam contoh ini, rute ‘api/users’ akan memiliki kebijakan CORS yang telah diatur.
```
$routes->get('api/users', 'UserController::index', ['filter' => 'cors']);
```
Pembatasan Penggunaan pada Kelompok Route: Kita juga dapat membatasi seluruh kelompok rute dalam metode group(). Dalam contoh ini, semua rute yang berada dalam grup ‘api/v1’ akan berjalan pada kebijakan CORS yang telah diatur.
```
$routes->group('api/v1', ['filter' => 'cors'], function ($routes) {
    // ...
});
```

2. Menggunakan Settingan Filter

Selain menggunakan library, pada CodeIgniter 4 sebenarnya memiliki fitur filter yang memungkinkan kita untuk mengatur middleware yang akan dijalankan sebelum atau sesudah permintaan HTTP diproses.

Kita dapat membuat filter kustom untuk mengatur CORS dan menerapkannya pada rute yang kita butuhkan.

Berikut adalah contoh penggunaan filter untuk mengatasi masalah cors:

Hal pertama yang dapat kita lakukan ialah membuat file dalam direktori app/Filters.

Kita dapat menggunakan terminal untuk membuat file filternya dengan adanya fitur spark pada codeigniter 4.

Ketik perintah berikut:

php spark make:filter <nama-filternya>

Sebagai contoh:

php spark make:filter CORS

Jika sudah silahkan tekan enter di keyboard, nantinya akan muncul pesan di terminal, sebagai berikut:

CodeIgniter v4.3.5 Command Line Tool - Server Time: 2023-10-05 06:34:56 UTC+00:00

File created: APPPATH\Filters\CORS.php

Itu artinya file filter dengan nama CORS.php telah berhasil dibuat didalam direktori folder app/Filters.

Kemudian silahkan buka file CORS.php, nantinya akan ada kode didalamnya seperti berikut:

<?php

namespace App\Filters;

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

class CORS implements FilterInterface
{
    /**
     * Do whatever processing this filter needs to do.
     * By default it should not return anything during
     * normal execution. However, when an abnormal state
     * is found, it should return an instance of
     * CodeIgniter\HTTP\Response. If it does, script
     * execution will end and that Response will be
     * sent back to the client, allowing for error pages,
     * redirects, etc.
     *
     * @param RequestInterface $request
     * @param array|null       $arguments
     *
     * @return mixed
     */
    public function before(RequestInterface $request, $arguments = null)
    {
        //
    }

    /**
     * Allows After filters to inspect and modify the response
     * object as needed. This method does not allow any way
     * to stop execution of other after filters, short of
     * throwing an Exception or Error.
     *
     * @param RequestInterface  $request
     * @param ResponseInterface $response
     * @param array|null        $arguments
     *
     * @return mixed
     */
    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        //
    }
}

Tambahkan kode berikut dalam function before:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-API-KEY, Origin,X-Requested-with, Content-Type, Accept, Access-Control-Requested-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PATCH, PUT, DELETE");

$method = $_SERVER['REQUEST_METHOD'];
if ($method == "OPTIONS") {
    header("HTTP/1.1 200 OK");
    die();
}

Jika sudah nantinya secara keseluruhan kode dalam file CORS.php akan terlihat sebagai berikut:

<?php

namespace App\Filters;

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

class CORS implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Headers: X-API-KEY, Origin,X-Requested-with, Content-Type, Accept, Access-Control-Requested-Method, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PATCH, PUT, DELETE");

        $method = $_SERVER['REQUEST_METHOD'];
        if ($method == "OPTIONS") {
            header("HTTP/1.1 200 OK");
            die();
        }
    }

    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        //
    }
}

Setelah kita membuat filter, maka itu berarti kita dapat menerapkannya pada rute tertentu atau secara global dengan menambahkannya ke file app/config/Filters.php.

di file Filters.php pada direktori app/config, cari kode berikut:

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

Setelah ketemu, kita tambahkan nilai arraynya seperti berikut:

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

Kemudian cari lagi kode berikut dibawahnya:

public array $globals = [
        'before' => [
            // 'honeypot',
            // 'csrf',
            // 'invalidchars',
        ],
        'after' => [
            'toolbar',
            // 'honeypot',
            // 'secureheaders',
        ],
    ];

Dibagian 'before' dalam arraynya definisikan cors sesuai yang ada di variabel $aliases sebelumnya, sehingga kodenya menjadi:

public array $globals = [
        'before' => [
            'cors'
            // 'honeypot',
            // 'csrf',
            // 'invalidchars',
        ],
        'after' => [
            'toolbar',
            // 'honeypot',
            // 'secureheaders',
        ],
    ];

3. Mengatur CORS di Routes dengan Method OPTIONS

Selain kedua cara sebelumnya terdapat cara lain lagi yang bisa kita lakukan yaitu menambahkan route dengan method OPTIONS untuk menangani permintaan CORS secara eksplisit.

Dalam artian kita membuat route dengan method options di codeigniter 4, dimana pada route tersebut mereturn set headers cors.

Bingung?

Berikut caranya!

Pertama buka file Routes.php, di direktori app/config, kemdian tambahkan route baru didalamnya dengan kode sebagai berikut:

$routes->options('(:any)', function () {
    return $this->response
            ->setHeader('Access-Control-Allow-Origin', '*')
            ->setHeader('Access-Control-Allow-Headers', 'Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token')
            ->setHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, PATCH, OPTIONS');
});

4. Menggunakan Ekstensi CORS di Chrome

Apabila ketiga cara sebelumnya masih belum berhasil, maka langkah terakhir yang bisa kita coba ialah menggunakan ekstension yang tersedia pada aplikasi browser chrome.

Memangnya ada ekstensionnya ya?

Iya ada, kita dapat menginstal ekstensi CORS di Chrome seperti “CORS Unblock” atau** “Allow CORS: Access-Control-Allow-Origin”** untuk sementara mematikan kebijakan CORS saat mengakses sumber daya melalui browser google Chrome.

Namun, ini bukanlah solusi yang disarankan ketika nantinya aplikasi web kita digunakan dalam mode Production atau digunakan public(banyak orang).

Itu artinya hanya bisa digunakan dalam lingkungan mode pengembangan(development) saja.

Dari ke empat cara mengatasi cors sebelumnya yang telah kita bahas.

Dimana pilihan mana yang harus kita pilih, itu semua tergantung pada kebutuhan dan preferensi dari kita masing-masing.

Dan juga, pilihannya dapat bervariasi tergantung pada kompleksitas aplikasi kita dan berapa banyak kontrol yang kita perlukan atas masalah CORS yang dihadapi.

Serta jangan lupa!

Pastikan untuk memahami implikasi keamanan dari setiap pendekatan yang Anda pilih.

Kesimpulan

Dalam pengembangan aplikasi web dengan CodeIgniter 4, mengatasi masalah CORS sangat penting untuk memungkinkan komunikasi yang aman dan efektif antara aplikasi frontend dan backend.

Dalam artikel ini, kita telah membahas pengertian dasar tentang CORS, mengapa hal ini penting di CodeIgniter 4, dan langkah-langkah untuk mengatasi masalah ini.

Dengan mengikuti panduan ini, kita dapat dengan mudah mengatasi masalah CORS dalam pengembangan aplikasi web kita menggunakan CodeIgniter 4.

Semoga artikel ini dapat membantu bagi kamu yang saat ini sedang menghadapi masalah error dalam pengembangan sebuah aplikasi web, terimakasih telah membaca.

Daftar Artikel Tips

Comments