Laravel & Vue: Axios GET call returning 200 status but no response

Question

EDIT:

So I just got this working by changing the axios get call to a post call, same with the route, any idea why did this work???

from: javascript axios.get('/globals/get-logged-user')

and

php Route::get('/globals/get-logged-user','GlobalsController@getLoggedUser');

to:

javascript axios.post('/globals/get-logged-user')

and

php Route::post('/globals/get-logged-user','GlobalsController@getLoggedUser');

I'm trying to get current authenticated user (if exists) for my Header vue component, I'm also using vuex store modules to keep my code organized and decoupled.

The proccess goes like this:

When the header component is mounted() I dispatch the action getLoggedUser.

Now inside the Globals store I make axios get call to route /globals/get-logged-user

If the call is succesfull I update the state, now my Header component should be able to access thelogged user data with the help of mapState vuex helper.

Now what actually happens:

The axios get call is done, it returns a positive 200 status code but the response is blank, nothing gets sent back from the backend.

This is my network tab:

https://i.imgur.com/hlD9bAY.png

As you can see the other ajax requests return actual data but the get call returns nothing, I also noticed the type of the GET call is html, could it be this?

My component:

 <template> <header class="header_maincontainer"> <div class="header_small_container"> <span>{{ loggedUser.email }}</span> </div> </header> </template> <!--SCRIPTS--> <script> import { mapState, mapActions } from 'vuex' export default { name: 'MainHeader', computed: { //...mapState('Globals', ['allGlobals', 'loggedUser', 'globals']), ...mapState('Globals', [ 'loggedUser']), }, mounted() { console.log(this.$options.name+' component successfully mounted'); this.getLoggedUser(); }, methods:{ //component actions declaration ...mapActions('Globals', ['getLoggedUser']), } }; </script> <!--STYLES--> <style scoped> </style> 

My Globals vuex module:

 import axios from 'axios' //STATE const state = { loggedUser:'', loadingStatus:0 } //GETTERS const getters = { } //ACTIONS const actions = { getLoggedUser ({ commit }) { commit( 'SET_LOAD_STATUS', {status: 1} ); axios.get('/globals/get-logged-user') .then((response) => { commit('GET_LOGGED_USER', { loggedUser: response.data.loggedUser }) console.log(response.data.loggedUser); commit( 'SET_LOAD_STATUS', {status: 2} ); }, (error) => { console.log(error); commit( 'SET_LOAD_STATUS', {status: 3} ); }) }, } //MUTATIONS const mutations = { GET_LOGGED_USER (state, loggedUser) { state.loggedUser = loggedUser; }, } export default { namespaced: true, state, getters, actions, mutations } 

And my laravel backend:

 <?php namespace App\\Http\\Controllers; use App\\Models\\Globals; use Illuminate\\Http\\Request; class GlobalsController extends Controller { public function getLoggedUser(){ $loggedUser = Auth::user(); return response()->json([ 'loggedUser' => $loggedUser ]); } } 

Please help me, I'm still stuck with this after all these days.

Answer 1

If you are receiving a 200 with an empty response you might be hitting the wrong route.

Try adding debug outputs or breakpoints to check that you are in the correct controller function.