Axios присылает в response много непонятного кода, почему так?

Question

[vadik_nv]

Есть локальное учебное приложение. Бэк: laravel api, фронт: VueJS
Реализована аутентификация (только аутентифицированный пользователь может отправить запрос)
При get запросе из фронта к базе данных приходит статус 200, но в response получаю что то странное(типа множество тегов span), вместо записи из базы. Заголовки вроде отправляю.
Вот запрос:

const token = this.state.auth.token
            await axios.get('http://laravel.api/api/tasks', {headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            }})

Вот что приходит в Response :

<script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl', addEventListener = function (e, n, cb) { e.addEventListener(n, cb, false); }; refStyle.innerHTML = 'pre.sf-dump .sf-dump-compact, .sf-dump-str-collapse .sf-dump-str-collapse, .sf-dump-str-expand .sf-dump-str-expand { display: none; }'; (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle); refStyle = doc.createElement('style'); (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle); if (!doc.addEventListener) { addEventListener = function (element, eventName, callback) { element.attachEvent('on' + eventName, function (e) { e.preventDefault = function () {e.returnValue = false;}; e.target = e.srcElement; callback(e); }); }; } function toggle(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass; if (/\bsf-dump-compact\b/.test(oldClass)) { arrow = '&#9660;'; newClass = 'sf-dump-expanded'; } else if (/\bsf-dump-expanded\b/.test(oldClass)) { arrow = '&#9654;'; newClass = 'sf-dump-compact'; } else { return false; } if (doc.createEvent && dump-ellipsis-note{color:#1299DA}</style><pre class=sf-dump id=sf-dump-487296104 data-indent-pad="  "><span class=sf-dump-note>Illuminate\Database\Eloquent\Collection</span> {<a class=sf-dump-ref>#1221</a><samp data-depth=1 class=sf-dump-expanded>
  #<span class=sf-dump-protected title="Protected property">items</span>: <span class=sf-dump-note>array:3</span>

это не весь response. там ещё очень много строк подобного..
В чем может быть проблема?

Comments

[Дмитрий Кузнецов]

Покажите код с контроллера (Laravel)

[vadik_nv]

Дмитрий Кузнецов,

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Requests\TaskStoreRequest;
use App\Http\Resources\TaskResource;
use App\Http\Resources\TaskResourceCollection;
use App\Models\Task;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class TaskController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return TaskResourceCollection
     */
    public function index(): TaskResourceCollection
    {   
        if (!Auth::user()) {
            abort('404');
        }

        $userId = Auth::user()->id;

        $tasks = Task::where('user_id', $userId)->get();
        dd($tasks);

        return new TaskResourceCollection($tasks);
    }



    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Requests\TaskRequest  $taskRequest
     * @return TaskResourse
     */
    public function store(TaskStoreRequest $taskStoreRequest)
    {
        if (!Auth::user()) {
            abort('404');
        }

        $userId = Auth::user()->id;

        $task = new Task();
        $task->user_id = $userId;
        $task->fill($taskStoreRequest->all());
        $task->save();

        return new TaskResource($task);
    }

    /**
     * Display the specified resource.
     *
     * @param  $task
     * @return TaskResource
     */
    public function show(Task $task)
    {
        $this->validateAuthUserTask($task);

        return new TaskResource($task);
    }

    private function validateAuthUserTask($task)
    {
        if ($task->user_id !== Auth::user()->id) {
            abort(403);
        }

        return true;
    }


    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  Task $task
     * @return TaskResource
     */
    public function update(Request $request, Task $task): TaskResource
    {
        $this->validateAuthUserTask($task);

        $task->update($request->all());

        return new TaskResource($task);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy(Task $task)
    {
        $this->validateAuthUserTask($task);

        $task->delete();

        return response()->json();
    }
}

[vadik_nv]

Дмитрий Кузнецов,
так же в инструментах разработчика во вкладке network/preview
приходят атрибуты и в них можно найти записи из базы.
вот часть preview

Illuminate\Database\Eloquent\Collection {#1221
  #items: array:3 [
    0 => App\Models\Task {#1222
      #fillable: array:3 [
        0 => "title"
        1 => "description"
        2 => "user_id"
      ]
      #connection: "pgsql"
      #table: "tasks"
      #primaryKey: "id"
      #keyType: "int"
      +incrementing: true
      #with: []
      #withCount: []
      #perPage: 15
      +exists: true
      +wasRecentlyCreated: false
      #attributes: array:7 [
        "id" => 1
        "title" => "raskolyou orex"
        "description" => "nadvoe"
        "user_id" => 4
        "created_at" => "2021-06-20 16:22:13"
        "updated_at" => "2021-06-20 16:22:13"
        "deleted_at" => null
      ]

Answer 1

[Aleksey]

У вас же dd($tasks) в контроллере. Именно его результат и возвращается.

Comments

[vadik_nv]

верно, прошу прощения за невнимательность, бэк писал давно, тут решил попробовать фронт, ориентировался только по роутам из laravel.