'Axios response.data return HTML instead of an object

I need help about Axios. I develop a SPA webapp on Laravel 6 (with package SPARK) and VueJS (version 2).

On a Vue component, I want to retrieve datas from my bdd. So, I use Axios to make a get request on an API uri. But, when I call Axios request, data field in Response object is a HTML code.

This is my code :

routes/web.php

Route::get('/', function(){
    return view('welcome');
});

Route::middleware('auth')->get('/{any?}', function (){
    return view('documents');
})->where('any', '[\/\w\.-]*');

The "welcome" view is a blade page where redirect on "/login" if user is not authenticate. Otherwise, it redirect on "/home". The link "/home" is define on vue-router in app.js. The other route is the unique way to display the webapp (it's a single page application). The Vue instanciation is in "passeport" view.

resources/js/app.js

import 'es6-promise/auto'

require('spark-bootstrap');
require('./components/bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

Vue.component('index', require('./components/pages/index').default);

import Dashboard from './components/pages/dashboard.vue';
...

const routes = [ 
    {
        name: 'dashboard',
        path: '/home',
        component: Dashboard,
    },
    {...}
]

const router = new VueRouter({ 
    history: true,
    mode: 'history', 
    routes: routes
});

var app = new Vue({
    mixins: [require('spark')],
    router,
});

router package is added in Vue instanciation. it is in the same context than spark component (identify by the #spark-app element)

resources/views/documents.blade.php

@extends('spark::layouts.app')

@section('content')
    <div id="app">
        <index :user="user"></index>
    </div>
@endsection

It is the view returned for any path. In the spark::layout.app, there is only a div with id="spark-app" and the @yield('content').

resouces/js/components/pages/index.vue

<template>
    <transition name="fade">
      <Component :is="layout" :user="user">
        <router-view :layout.sync="layout" :user="user"></router-view>
      </Component>
    </transition>
</template>
.
.
<script>
    const default_layout = "default";

    export default{
      props: ['user'],

      data(){
        return{
          layout: 'div',
        }
      },
    }
</script>

It's just the vue component with the router-view configure with a layout.

resources/js/components/pages/dashboard.vue

<template>
...
</template>

<script>
import Default from './../layouts/Default.vue'
    export default {
        props: ['user'],

        data: function () {
            return {
                documents: []
            }
        },
        created() { 
            this.$emit('update:layout', Default);
        },
        mounted(){
            // extract passeports's informations
            this.axios.get('/api/documentslist').then(response => {
                console.log(response);
                this.documents= response.data.data;
            });
        }
    }
</script>

Here, I call the documentslist API define in routes/api.php.

routes/api.php

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

app/http/Controllers/DocumentController.php

...
public function list(Request $request){
   return DocumentCollection(Document::all());
}
...

When I go to "/home", I verified "documents" data in Vue (or in the javascript console log), and response.data = "\r\n\r\n\r\n (...) v-if=\"notification.creator\" :src=\"notification.creator.photo_url\" class=... (10024 total length)"

But, list method in DocumentController have to return a list of documents, and not a HTML code.

Furthermore, I use Passport Laravel to unified authentication by login and the API token. And the Axios request work in the same project without SPA structure.

I hope I'm clear in the problem explanation, and that I forget any detail to understand.

Thanks.

laravelvue.jsaxiossingle-page-applicationlaravel-spark


Solution 1:[1]

You can simply return like this from your controller

return response()->json(Document::all());

Solution 2:[2]

I suspect the API link to redirect with the SPA route (in routes/web.php, any path return the "home" view). I try to change route in routes/web.php.

instead of :

Route::middleware('auth')->get('/{any?}', function (){
    return view('home');
})->where('any', '[\/\w\.-]*');

I put this :

Route::middleware('auth')->get('/home', function (){
    return view('home');
});

Like this, this route doesn't take account of all path.

And...it works ! But...it isn't what I want :( Indeed, without the route with '/{any?}' the SPA doesn't work.

I don't understand why this method works another project in Laravel (without Spark package), and doesn't work with this project.

Solution 3:[3]

I don't know about laravel but this problem arises when the route you are calling is not the correct one. Do some efforts and check what route the application in eventually calling also take a look at your proxy settings.

****I am NodeJs developer not Laravel

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Digvijay
Solution 2 CDpro
Solution 3 Yog Sharma

Related Questions