Cant Access Protected Laravel 5.6 API Endpoints with Vue-CLi 2

Question

Please i need help with an application am developing with Laravel 5.6 and Vue 2

I have setup my laravel passport laravel-cors, vue-resource, vue-router etc. I can successfully generate login and generate access tokens. I have also included the token to all http requests by adding this to the main.js file

Vue.http.headers.common['Authorization'] = 'Bearer ' + Vue.auth.getToken() 

I can successful make calls to the laravel api endpoints that are not protected.

However, immediately i protect my laravel routes with the Auth:api middleware, and attempt accessing the route, it keeps returning "401 Unauthenticated" as the response. Funny enough when i use chrome debugging tool, under network, under XMR, it appears that the token was even passed sucessfully to the header yet am unauthenticated.

Below is my protected API routes

Route::group(['middleware' => 'auth:api'], function(){

    Route::get('test', function (){
        return response()->json(
            [
                'user' => [
                    'name' => 'christian',
                    'address' => 'None'
                ]
            ]
        );
    });

});

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

AM using the code below to call the protected API endpoint

created(){
    this.$http.get('api/user').then(response => {
          console.log(response)
    });
},

See Response

Request URL: http://127.0.0.1:8000/api/user
Request Method: GET
Status Code: 401 Unauthorized
Remote Address: 127.0.0.1:8000
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: http://localhost:8080
Cache-Control: no-cache, private
Connection: close
Content-Type: application/json
Date: Fri, 06 Jul 2018 19:53:25 +0000, Fri, 06 Jul 2018 19:53:25 GMT
Host: 127.0.0.1:8000
Transfer-Encoding: chunked
Vary: Origin
X-Powered-By: PHP/7.1.8
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 59
Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6Ijk1YzEwN2MyMDc4ZTFjZjZiOTRjNjljMTBhYzE0MjZkMjFlNjQ0N2Y0NzRlZTczNDNiM2UwYzdkOTAyZTgzNDM3Y2QwYmRhZWE3MGNmNTZmIn0.eyJhdWQiOiIyIiwianRpIjoiOTVjMTA3YzIwNzhlMWNmNmI5NGM2OWMxMGFjMTQyNmQyMWU2NDQ3ZjQ3NGVlNzM0M2IzZTBjN2Q5MDJlODM0MzdjZDBiZGFlYTcwY2Y1NmYiLCJpYXQiOjE1MzA4OTcxMDUsIm5iZiI6MTUzMDg5NzEwNSwiZXhwIjoxNTYyNDMzMTA1LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.APtSR0gYvi6ocvM-_qnFLVZDUdYVoU9jTvb-1QFi2QqsQ_4x1H2t9aVj7kBMhgarKDgadsliqd0gPEfXLzQncFblOgNfjmvk4KzuHfjNQV0t4CfVPJgiuttUReeYwfr3oz7ecOyjxpbJRWyOZLjBB270HuKMjELTZI2ome3PpzTmqBvuNmIscFOKGIYUC7Jz8oN6hC0HMhFqXXp9pRwkv4zBzcFI2qHO75OxdWZWrN97hx6VslYolt0SNJvJEhKW-3Kc3NHuF5vYFihlP6I9ACEnOl1U8sV8pCfg3El0Hr4kJNxVQSHhcimx-dvb9Xz2xOeXyoilbmzW4QCR58y12SpsF6Rpk2nS4kTK8u_-wzgaeHY33ot2OnL61R_fsZ7jH3TCWyVGPY-zVhw1sm6YYwe4l43R6e7SR03s6BVgla0vgr1Ger7r7dqa5DDiIW8hlQLUYawf9d2IFe4Q1WtwWxTNW6Dy8tSeI33ndZUowjoqy1u0oMTJIhdg3N9PRZppgNyyJZxCj7gKK3wYXuysrT4SnQDJ6DZpPyEQ2c-xv2cuhZJtA_jS194sdnXJOYEusL3sJVScc_8ztyjgVF9niky66OVue31FL2dyTsP0jRmhJ5bX775PVRvaO6EN3WxCuxXpNFv3GHyfzxGJo3beWF_NgkTkOXZadX90l8gbx-0
Origin: http://localhost:8080
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Answer 1

Add this code to your file public/index.php

header("Access-Control-Allow-Origin: $domaine"); //$domaine = 'http://localhost:8080/';