401 (Unauthorized) with Laravel default vuejs setup - php

Question

I'm getting a 401 when trying to access the laravel api from vuejs using axios.
It's the Laravel 5.4 out-of-the-box setup so I have no idea why it doesn't work.
Here is my code:
// routes -> api.php
Route::middleware('auth:api')->get('/user', function (Request $request) {
return request->user();
});
// axios request
axios.get('/api/user').then(function (response) {
console.log(response);
console.log(response.status);
});
Request contains all the token stuff.. I think.
X-CSRF-TOKEN:uAW2t..
X-Requested-With:XMLHttpRequest
X-XSRF-TOKEN:eyJpdiI..
All response by request:
General
Request URL:http://localhost/public/api/user
Request Method:GET
Status Code:401 Unauthorized
Remote Address:[::1]:80
Response Headers
view source
Cache-Control:no-cache, private
Connection:Keep-Alive
Content-Length:28
Content-Type:application/json
Date:Wed, 22 Mar 2017 09:35:49 GMT
Keep-Alive:timeout=5, max=92
Server:Apache/2.4.23 (Win64) PHP/5.6.25
X-Powered-By:PHP/5.6.25
X-RateLimit-Limit:60
X-RateLimit-Remaining:57
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Cookie:XSRF-TOKEN=eyJpdiI6IjNBVHdDNWdsTnBYT3FUT1E5d1IxTmc9PSIsInZhbHVlIjoiY05JYW9LdDB3ek5FVjRWYkVEM21NQlFEQnNPdHI0Rk5MdWhKbFcrZU1qWFB5MGIyXC9oR1RQNGJkdTB6RmZ3SFp1OU04S0RpazYzZW5ZNUhVMng1VCtnPT0iLCJtYWMiOiIyZTQ5ZDdlYTgwYmMzZTYxYjMzMjljMmNlMDJlYWFlNTNkNzJkZmY5ZGVlMTQ5ZjlmZDM4NTYzOTc1MjIwYzhkIn0%3D; laravel_session=eyJpdiI6IkhcLzJKRDVDTHRDN1FWUjZicDdZaVJnPT0iLCJ2YWx1ZSI6IlJoTkVQWUQ5OWZuYUo4bmF1eHRMYWFlamZramhtTkpmMnYwbUlaaTV3ZENuWFJQZW9IcDZxbU5EQjJXSDY2a01WMHpjeHU3Uk9UOG44MzN3NmgxK2NBPT0iLCJtYWMiOiI4OWM1ZWI3YjIzMDg5MTAwYjc0YmZmZDE4OTY3MjU5OTNkZDdjYjY2MjU3NmFlNTE3NDE2NTVjYzBhY2Y4MzJmIn0%3D
DNT:1
Host:localhost
Referer:http://localhost/public/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
X-CSRF-TOKEN:uAW2tI8bags0CaQaYBKmbfdExoCVDnZlJb1sW9f4
X-Requested-With:XMLHttpRequest
X-XSRF-TOKEN:eyJpdiI6IjNBVHdDNWdsTnBYT3FUT1E5d1IxTmc9PSIsInZhbHVlIjoiY05JYW9LdDB3ek5FVjRWYkVEM21NQlFEQnNPdHI0Rk5MdWhKbFcrZU1qWFB5MGIyXC9oR1RQNGJkdTB6RmZ3SFp1OU04S0RpazYzZW5ZNUhVMng1VCtnPT0iLCJtYWMiOiIyZTQ5ZDdlYTgwYmMzZTYxYjMzMjljMmNlMDJlYWFlNTNkNzJkZmY5ZGVlMTQ5ZjlmZDM4NTYzOTc1MjIwYzhkIn0=

Answer 1

If you authorising user to use api you have to have a token either in url or in authorisation header key. That token should be from api_token column in users table.
var token = 'exampleToken';
axios.get(
'/api/user?api_token=' + token, // here
{
headers:
{
'Authorization':'Bearer ' + token // or here
}
}
).then(...)

Answer 2

axios.get('/api/user',{headers:{
'Accept':'application/json',
'Authorization':'Bearer ' + window.localStorage.getItem('token_name_here')
'cache-control':'no-cache'
}).then(...)...