Ax ios response.data возвращает HTML вместо объекта - PullRequest
Новая
       51

Ax ios response.data возвращает HTML вместо объекта

0 голосов
/ 16 июня 2020

Мне нужна помощь по поводу Ax ios. Я разрабатываю веб-приложение SPA для Laravel 6 (с пакетом SPARK) и VueJS (версия 2).

В компоненте Vue я хочу получить данные из моего bdd. Итак, я использую Ax ios, чтобы сделать запрос на получение API uri. Но когда я вызываю запрос Ax ios, поле данных в объекте Response представляет собой код 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» определена на vue -маршрутизаторе в приложении js. Другой путь - это уникальный способ отображения веб-приложения (это одностраничное приложение). Реализация Vue находится в представлении «паспорта».

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 создание. он находится в том же контексте, что и компонент Spark (определяется элементом # spark-app)

resources / views / documents.blade. php

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

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

Это вид, возвращаемый для любого пути. В spark :: layout.app есть только div с id = "spark-app" и @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>

Это просто компонент vue с конфигурацией router-view с макетом.

resources / js / components / pages / панель управления. 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>

Здесь я вызываю список документов API, определенный в 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());
}
...

Когда я go в «/ home», я проверенные данные "документов" в Vue (или в журнале консоли javascript) и response.data = "\ r \ n \ r \ n \ r \ n (...) v-if = \" уведомление .creator \ ": src = \" notification.creator.photo_url \ "class = ... (общая длина 10024)"

Но метод списка в DocumentController должен возвращать список документов, а не HTML код.

Кроме того, я использую Passport Laravel для унифицированной аутентификации по логину и токену API. И запрос Ax ios работает в том же проекте без структуры SPA.

Надеюсь, мне понятно объяснение проблемы, и что я забыл понять какие-либо детали.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Я подозреваю, что ссылка API перенаправляет с маршрутом SPA (в routes / web. php любой путь возвращает «домашний» вид). Я пытаюсь изменить маршрут в 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) и не работает с этим проектом.

0 голосов
/ 16 июня 2020

Вы можете просто вернуться вот так со своего контроллера 

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