چگونه مشکل CORS در تعامل Vue CLI 3 با وب سرویس لاراول 6 را حل کنیم؟

استفاده از وب سرویس لاراول در یک پروژه‌ی Vue

احتمالا همه شما در شروع توسعه‌ی یک پروژه‌ی مبتنی بر Vue CLI نیازمند استفاده از وب سرویس‌هایی خواهید بود که خارج از دامنه‌ی پروژه‌ی فعلی است و با خطایی مشابه زیر برخورد میکنید:

Access to XMLHttpRequest at ‘http://backend.test/api/data' from origin ‘http://localhost:8080/' has been blocked by CORS policy.

این خطا طی بارها جستجو در اینترنت و تست راه حل هایی که برای دیگران موفق بوده است، ممکن است برای شما موفقیت آمیز نباشد و مشکل مثل یک کابوس همچنان برای شما پا برجا بماند. تیم راهکارهای هوشمند روتیک در این مقاله قصد دارد تا به شما راه حل قطعی این مشکل را ارائه دهد.

اگر میخواهید بیشتر درباره‌ی این خطا مطالعه کنید، به این آدرس مراجعه کنید.

و اما راه حل موجود برای یک پروژه‌ی لاراولی به این شکل میباشد:

1. ابتدا با دستور زیر یک Middleware ایجاد کنید:

php artisan make:middleware Cors

2. سپس قطعه کد زیر را داخل تابع handle این Middleware قرار دهید:

return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
    ->header('Access-Control-Allow-Headers', 'Content-Type, Cache-Control, Accept, Authorization, X-Requested-With, Application');

اینگونه مشخص کرده ایم که با تمام متد هایی که بالا مشخص شده از هر آدرسی میتوانیم به Route ای که این Middleware روی آن قرار دارد؛ درخواست Ajax ارسال کنیم.

نکته! اگر قصد ارائه‌ی public api ندارید، حتما مقدار مقابل Access-Control-Allow-Origin را مشخص کنید.

ضمنا در صورتی که قصد ارسال هدر خاصی ضمن درخواست خود را داشته باشید، میتوانید آن را به لیست هدر ها در خط آخر اضافه کنید. من اینجا عمده‌ی هدر های امن و پر کاربرد را برای شما از قبل قرار داده ام.

3. سپس فایل Kernel در فضای نام (App\Http) را باز کنید و در آرایه‌ی protected $routeMiddleware مقدار زیر را اضافه کنید:

'cors' => \App\Http\Middleware\Cors::class

4. فایل api.php را باز کنید و برای مثال بدین شکل از این Middleware استفاده کنید:

Route::group(  [  'prefix'  =>  'auth' ,  'middleware'=>'cors'  ]  ,  function () {
    Route::post('login', 'Auth\ApiController@login');
});

5. حالا به آدرس زیر با متد POST درخواست Ajax ارسال کنید:

/api/auth/login

نیازی به ایجاد فایل vue.config.js و یا تنظیم devServer نیست و سمت js هیچ تغییری انجام ندهید. تنها باید دقت کنید که هدر های ارسالی شما در لیست هدر های بالا باشد و به آدرس هایی که آنها را مجاز به دریافت درخواست Ajax خارج از دامنه‌ی خود کرده اید؛ درخواست ارسال کنید.

6. حالا درخواستی به شکل زیر با jQuery Ajax ایجاد میکنیم:

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
    <meta charset=&quotUTF-8&quot>
    <title>Resolved!</title>
</head>
<body>

<input type=&quotemail&quot id=&quotemail&quot>
<input type=&quotpassword&quot id=&quotpassword&quot>
<button =&quot&quot id=&quotlogin&quot>Login</button>

<script src=&quothttps://code.jquery.com/jquery-3.4.1.min.js&quot>


$(document).ready(function () {
    $(&quot#login&quot).click(function () {
        $.ajax({
            url: 'https://example.ir/api/auth/login',
            type: 'post',
            data: {email: $(&quot#email&quot).val(), password: $(&quot#password&quot).val()},
            header: 'Content-Type: application/json',
            success: function (data) {

                if (data.status) {

                    console.log(data);

                } else {

                    console.log(data);

                }
            },
            error: function (xhr, status, error) {

                console.log(error);

            }
        });
    });
});


</body>
</html>