Menambahkan CORS Middleware di Lumen REST API

Sobatcoding.com - Menambahkan CORS di Lumen REST API

Pernah mengalami REST API blocked by CORS Policy seperti berikut?

Ya, itulah REST API blocked CORS Policy. Jadi API tidak bisa diakses oleh domain yang berbeda karena CORS belum di enable.

CORS adalah singkatan dari Cross-Origin Resource Sharing, yaitu sebuah mekanisme header HTTP yang digunakan untuk menginformasikan ke browser untuk mengizinkan aplikasi web yang berjalan di satu asal (domain) memiliki izin untuk mengakses sumber daya yang dipilih dari server di asal yang berbeda.

Tanpa enable CORS API yang telah kita buat tidak dapat diakses oleh domain yang berbeda dengan domain API. Oleh karena itu kita perlu enable CORS agar REST API yang kita buat bisa diakses oleh domain atau front end.

Langkah langkah mengaktifkan CORS adalah sebagai berikut:

Step 1: Buat Middleware CorsMiddleware

Buatlah sebuah middleware bernama CorsMiddleware.php di folder app/Http/Middleware kemudian tambahkan kode berikut:

<?php
namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin'      => '*',
            'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With'
        ];

        if ($request->isMethod('OPTIONS'))
        {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
        {
            $response->header($key, $value);
        }

        return $response;
    }
}

Step 2: Register Middleware

Buka file app.php di folder bootstrap, tambahkan line berikut untuk register middleware:

/*
|--------------------------------------------------------------------------
| Register Middleware
|--------------------------------------------------------------------------
|
| Next, we will register the middleware with the application. These can
| be global middleware that run before and after each request into a
| route or middleware that'll be assigned to some specific routes.
|
*/
$app->middleware([
    App\Http\Middleware\CorsMiddleware::class
]);

Output: Hasil Enable CORS

Setelah kita tambahkan CORS di output header akan muncul seperti berikut:

Full source code bisa dilihat di account github sobatcoding.com di link berikut : https://github.com/sobatcoding21/Lumen-API/blob/main/app/Http/Middleware/CorsMiddleware.php

Sekian tutorial tentang CORS Lumen Laravel.

Semoga bermanfaat.