اگر در لاراول برای frontend مثل فریم ورک‌های Vue و React و… API می‌نویسید احتمالا به مشکل CORS مرورگر برخورده اید. می‌خواهیم در این نوشته این مشکل را برای همیشه حل کنیم. در اینجا دو راه حل برای حل این مشکل ارائه می‌دهیم. راه حل اول نوشتن یک middleware است و راه حل دوم حل مشکل با استفاده از یک پیکج است.

راه حل اول

یک middleware بسازید. برای این کارکافی است دستور زیر را اجرا کنید.

php artisan make:middleware EnableCors

فایل ایجاد شده را باز کنید و این کد را در آن قرار دهید.

/**
 * 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-Headers'=>' Content-Type, Accept, Authorization, X-Requested-With, Cache-Control'
    ];
    if($request->getMethod() == "OPTIONS") {
        return \Response::make('OK', 200, $headers);
    }
    $response = $next($request);
    foreach ($headers as $key => $value) {
        $response->header($key, $value);
    }
    return $response;
}

در انتها برای کار کردن این کد باید آن را در کرنل وارد کنید. به همین منظور فایل kernel.php را باز کنید و در بخش middleware ها کلاسی که ساخته اید را اضافه کنید. پس از افزودن این کلاس این قسمت به شکل زیر خواهد بود.

protected $middleware = [
\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
\App\Http\Middleware\TrustProxies::class,
\App\Http\Middleware\EnableCors::class,
];

در اینجا در خط 7 کلاس مورد نظر را اضافه کرده ایم.

راه حل دوم

راه حل دوم استفاده از پکیجی است که می‌توانید از این لینک سورس کد، مستندات و روش نصب این پکیج را ببینید.