Axios response.data return HTML instead of an object

Question

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.

score 0 · Answer 1 · answered Jun 16 '20 at 17:40

0

You can simply return like this from your controller

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

answered Jun 16 '20 at 17:40

Digvijay

7,836
3
32
53

Thanks for your answer. But it doesn't fix the problem. I think that Axios can't access to the API link. It's not an error because response send a status 200. Maybe it's the way I declare composant with "import ... from..." in app.js. In a NO SPA version, I define my component in a js file with Vue.component(...), and declare it with a require() in components/bootstrap.js, and it's work. But, how can I declare components like this and add it in the router ? – CDpro Jun 17 '20 at 07:20

score 0 · Answer 2 · answered Jun 17 '20 at 10:33

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.

score 0 · Answer 3 · answered Dec 01 '20 at 11:20

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

Axios response.data return HTML instead of an object

3 Answers3