Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

Last Updated: April 25, 2020

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

Test