So if you're like me and developing a website on localhost where you're trying to fetch data from Laravel API and use it in your Vue front-end, and you see this problem, here is how I solved it:
php artisan make:middleware Cors
. This will create app/Http/Middleware/Cors.php
for you.Add the following code inside the handles
function in Cors.php
:
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
In app/Http/kernel.php
, add the following entry in $routeMiddleware
array:
‘cors’ => \App\Http\Middleware\Cors::class
(There would be other entries in the array like auth
, guest
etc. Also make sure you're doing this in app/Http/kernel.php
because there is another kernel.php
too in Laravel)
Add this middleware on route registration for all the routes where you want to allow access, like this:
Route::group(['middleware' => 'cors'], function () {
Route::get('getData', 'v1\MyController@getData');
Route::get('getData2', 'v1\MyController@getData2');
});
mounted()
function and not in data()
. Also make sure you use http://
or https://
with the URL in your fetch()
call.Full credits to Pete Houston's blog article.