Cho phép CORS trên Laravel

Một nhu cầu rất thông dụng của anh em web developer đó là sử dụng API để lấy dữ liệu đổ ra front-end. Mọi chuyện sẽ chẳng có vấn đề gì khi mà front-end và backend của anh em trên cùng một domain.

Tuy nhiên nếu anh em làm việc trên nhiều domain ( ngay cả trên môi trường local thì cũng có localhost:3000 và localhost:8000) thì việc lấy dữ liệu từ API đôi khi cũng rất khó khăn.

Dòng thông báo lỗi CORS khi cố gắng lấy dữ liệu từ một domain khác.

CORS là gì?

CORS là một cơ chế cho phép nhiều tài nguyên khác nhau (fonts, Javascript, v.v…) của một trang web có thể được truy vấn từ domain khác với domain của trang đó. CORS là viết tắt của từ Cross-origin resource sharing.

Tạo Middleware trong Laravel để cho phép CORS như thế nào?

Đầu tiên chúng ta dùng artisan để tạo một Middleware tên là Cors

php artisan make:middleware Cors

Cập nhật header trả về trong app/Http/Middleware/Cors.php

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, X-Token-Auth, Authorization');
    }
}

Bạn có thể tinh chỉnh lại header theo ý mình. Ở đây mình cho phép toàn bộ truy cập từ bên ngoài đều được phép.

Sau đó đăng ký Middleware mới tạo tại app/Http/Kernel.php

<?php

//...

protected $routeMiddleware = [
        'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'demo' => Demo::class,
        'cors' => \App\Http\Middleware\Cors::class, // <== Thêm dòng này
    ];

Cuối cùng, bạn bật Cors trên toàn bộ api

Trong cùng file app/Http/Kernel.php

Tìm và thêm vào:

<?php
//...
protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
            'cors', // <= Thêm vào đây
        ],
    ];

Chúc các bạn thành công!