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

2 Now add the HandleCors middleware to app/Http/Kernel.php

3 Next you have to do some configuration of the cors.php file @config . So to make the cors.php run the following command

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