axios response.data 返回 HTML 而不是对象

Question

我需要有关 Axios 的帮助。 我在 Laravel 6（带有包 SPARK）和 VueJS（版本 2）上开发了一个 SPA webapp。

在一个 Vue 组件上，我想从我的 bdd 中检索数据。 因此，我使用 Axios 在 API uri 上发出 get 请求。 但是，当我调用 Axios 请求时，响应对象中的数据字段是 HTML 代码。

这是我的代码：

routes/web.php

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

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

“欢迎”视图是一个刀片页面，如果用户未通过身份验证，则重定向到“/login”。 否则，它会重定向到“/home”。 链接“/home”是在 app.js 中的 vue-router 上定义的。 另一条路线是显示 webapp 的独特方式（它是一个单页应用程序）。 Vue 实例化在“passeport”视图中。

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,
});

在Vue实例化中添加了router包。 它与 spark 组件处于相同的上下文中（由#spark-app 元素标识）

资源/视图/documents.blade.php

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

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

这是为任何路径返回的视图。 在 spark::layout.app 中，只有一个 id="spark-app" 和 @yield('content') 的 div。

资源/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>

它只是带有布局的路由器视图配置的vue组件。

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>

这里我调用了routes/api.php中定义的documentslist API。

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());
}
...

当我转到“/home”时，我在 Vue（或 javascript 控制台日志）中验证了“文档”数据，并且 response.data = "\r\n\r\n\r\n (.. .) v-if=\"notification.creator\" :src=\"notification.creator.photo_url\" class=... (10024 总长度)"

但是，DocumentController 中的 list 方法必须返回文档列表，而不是 HTML 代码。

此外，我使用 Passport Laravel 通过登录和 API 令牌来统一身份验证。 并且 Axios 请求在没有 SPA 结构的同一个项目中工作。

我希望我在问题解释中很清楚，并且我忘记了要理解的任何细节。

谢谢。

Answer 1

你可以简单地从你的控制器中返回

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

Answer 2

我怀疑 API 链接使用 SPA 路由重定向（在 routes/web.php 中，任何路径都返回“home”视图）。 我尝试在 routes/web.php 中更改路由。

而不是：

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

我把这个：

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

这样，这条路由不考虑所有路径。

而且...它有效！ 但是……这不是我想要的:( 事实上，如果没有带有 '/{any?}' 的路由，SPA 就无法工作。

我不明白为什么这种方法适用于 Laravel 中的另一个项目（没有 Spark 包），并且不适用于这个项目。

Answer 3

我不了解 laravel，但是当您调用的路线不正确时，就会出现此问题。做一些努力并检查应用程序最终调用的路由，同时查看您的代理设置。

****我是 NodeJs 开发者而不是 Laravel