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

Posted 2023-02-22

【中文标题】axios response.data 返回 HTML 而不是对象

【英文标题】：Axios response.data return HTML instead of an object

【发布时间】：2020-10-06 04:35:01

【问题描述】：

我需要有关 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 结构的同一个项目中工作。

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

谢谢。

【参考方案1】：

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

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

【讨论】：

感谢您的回答。但这并不能解决问题。我认为Axios无法访问API链接。这不是错误，因为响应发送状态 200。也许这是我在 app.js 中使用“import ... from ...”声明组合的方式。在 NO SPA 版本中，我使用 Vue.component(...) 在 js 文件中定义我的组件，并在 components/bootstrap.js 中使用 require() 声明它，它可以工作。但是，如何声明这样的组件并将其添加到路由器中？

【参考方案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 包），并且不适用于这个项目。

【参考方案3】：

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

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