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
handleError xhr.js:83
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 app/Http/Kernel.php
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 config/cors.php
That is all, now yo can make the request without getting any error messages