I am trying to get the tasks of the logged in user into a vuejs component via axios but I keep getting

POST http://localhost:8000/api/tasks 401 (Unauthorized)

Here's the routes from api.php:

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

Route::prefix('tasks')->group(function() {
    Route::post('/', 'TasksController@index');
    Route::post('{id}', 'TasksController@single');
    Route::post('new', 'TasksController@new');
});

});`

The index function of TasksController:

`public function index(Request $request) {

if ( $request->ajax() ) {
    return auth()->user()->tasks()->orderBy('name', 'ASC')->get();
}

return view('tasks.index')
            ->with('tasks', auth()->user()->tasks()->orderBy('name', 'ASC')->get());

}`

And the vuejs component:

`<template> <div> <ul> <li v-for="task in tasks" v-bind:key="task.id">{{ task.name }}</li> </ul> </div> </template>

<script> export default { data() { return { tasks: [], } }, created() { this.fetchTasks(); }, methods: { fetchTasks() { axios({ url: 'api/tasks', method: 'POST', headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }).then(res => { this.tasks = res.data; }); } } } </script>`