saat sedang mengerjakan skripsi saya mengalami masalah berupa pesan Access to XMLHttpRequest at 'http://127.0.0.1:8000/graph' ...


saat sedang mengerjakan skripsi saya mengalami masalah berupa pesan

Access to XMLHttpRequest at 'http://127.0.0.1:8000/graph' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


pada saat akan menggunakan API pada Laravel, saya pikir kendala ini cuma terjadi pada laptop saya dan bakal normal kalau sudah di hostingkan dan di access di ponsel, akan tetapi saat sudah di deploy masih saja muncul pesan serupa dan API nya tidak bisa dijalankan.

setelah browsing nemu beberapa solusi salah satunya menginstall add-ons pada browser tapi menurut saya solusi ini tidak worth it ketika akan digunakan pada device lain masa iya sih minta orang lain sebelum menggunakan aplikasi yang kita bangun harus nginstall add-ons dulu :(

untuk solusi kedua ini cukup menambahkan middleware pada laravel (work on laravel 5.8) lalu di dalam middleware tersebut masukkan code berikut:


public function handle($request, Closure $next)
    {
        header("Access-Control-Allow-Origin: *");
        //ALLOW OPTIONS METHOD
        $headers = [
            'Access-Control-Allow-Methods' => 'POST,GET,OPTIONS,PUT,DELETE',
            'Access-Control-Allow-Headers' => 'Content-Type, X-Auth-Token, Origin, Authorization',
        ];
        if ($request->getMethod() == "OPTIONS"){
            //The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return response()->json('OK',200,$headers);
        }
        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }
        return $response;


    }

setelah itu masuk ke app > Http > Kernel.php


tambahkan nama middleware kalian dibawah (punya saya \App\Http\Middleware\Cors::class) kalian sesusaikan saja dengan punya kalian.

refreshhhhh dan taraaaaa aplikasi kalian akan bisa digunakan