Getting 401 unauthorized in Laravel passport, vueJS and Axios

Question

I am a bit new to VueJS and I want to get data from an Laravel (passport) API, so for that I used npm i axios for API requests and this is my script code from App.vue file:

import axios from 'axios';
export default {
  data () {
    return {
    }
  },
  created() {
    const postData = {
      grant_type: "password",
      client_id: 2,
      client_secret: 'MvEyvm3MMr0VJ5BlrJyzoKzsjmrVpAXp9FxJHsau',
      username: 'my-email@gmail.com',
      password: '********',
      scope: ''
    }
    axios.post('http://localhost/api/oauth/token', postData)
    .then(response => {
      console.log(response.data.access_token);
      const header = {
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + response.data.access_token,
      };
      axios.get('http://localhost/api/api/user', {headers: header})
      .then(response => {
        console.log(response)
      })
    })
  }
}

The API.PHP (routes file for API):

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

And this is the Middleware code for CORS fixing in Laravel:

public function handle($request, Closure $next)
{
    $domains = ["http://localhost:8080"];

    if (isset($request->server()['HTTP_ORIGIN'])) {
        $origin = $request->server()['HTTP_ORIGIN'];
        if (in_array($origin, $domains)) {
            header('Access-Control-Allow-Origin: ' . $origin);
            header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization');
        }
    }

    return $next($request);
}

Look at the console.log(response.data.access_token), I am getting the token logged in the console but the next request gives me 401 unauthorized error, I tried many solutions but not worked, any suggestions?

`http://localhost/api/api/user` should be `http://localhost/api/user` Not? — Vikash Pathak, Jun 07 '19 at 12:32
no `http://localhost/api` that's my project-name and the next `api` is for accessing the **API Routes**. — , Jun 07 '19 at 12:46
Please ensure you hav followed all these steps.. https://medium.com/modulr/create-api-authentication-with-passport-of-laravel-5-6-1dc2d400a7f — Vikash Pathak, Jun 07 '19 at 12:54
Getting this now `Access to XMLHttpRequest at 'http://localhost/api/api/user' from origin 'http://localhost:8080' has been blocked by CORS policy`; — , Jun 07 '19 at 12:58
for the time being please remove the domain validation from the cors settings.. — Vikash Pathak, Jun 07 '19 at 13:01
Would be greate if you can use the `cors` package or follow this ... https://stackoverflow.com/questions/33076705/laravel-5-1-api-enable-cors — Vikash Pathak, Jun 07 '19 at 13:01

score 0 · Answer 1 · answered Jun 05 '20 at 01:57

you need to send the token with axios request in the header so the backend knows its legit, you can only do that after you check your backend is working fine with postman, now you can set the axios header like this axios.defaults.baseURL = '/api'; axios.defaults.headers.common['Authorization'] = "Bearer " + your_token_variable

Getting 401 unauthorized in Laravel passport, vueJS and Axios

1 Answers1