Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8001/api/categories/?page=undefined. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Error: “Network Error” createError createError.js:16
This happens when I run the Vue app from localhost to fetch the data from Laravel application running on http://127.0.0.1:8001/api
To fix the you can use the following steps
1 Install the following package in your Laravel Project
composer require fruitcake/laravel-cors
2 Now add the HandleCors middleware to
protected $middleware = [ // ... \Fruitcake\Cors\HandleCors::class, ];
3 Next you have to do some configuration of the cors.php file @config . So to make the cors.php run the following command
php artisan vendor:publish --tag="cors"
4 Now change the ‘
paths' =>  to
'paths' => ['*'] in your
That is all, now yo can make the request without getting any error messages