Запрос прерван при попытке отправить данные из vue js в laravel бэкэнд - PullRequest
Новая
       4

Запрос прерван при попытке отправить данные из vue js в laravel бэкэнд

0 голосов
/ 15 февраля 2020

Я боролся с проблемой как целый день. Каждый раз, когда я хочу опубликовать данные на моем laravel бэкэнде из моего vue js компонента, он говорит, что запрос был прерван. Я действительно не вижу, что не так с моим кодом. Любая помощь очень ценится. У меня установлен CORS, так что это не проблема. Я попытался очистить кэш маршрутов, и это тоже не сработало.

Метод хранения контроллера. Вот где я проверяю, существует ли заголовок, и если нет, продолжаю сохранять историю в базе данных: 

public function store(
    AuthenticatedUserId $authenticatedUserId,
    CreateNewRecordInDatabase $createNewRecordInDatabase,
    FindDataById $findDataById, 
    RetrieveAllData $retrieveAllData,
    Request $request, 
    $writer
    )
{
    $writer = $findDataById->findDataById(User::class, $writer);

    $stories = $retrieveAllData->retrieveAllData(Story::class);

    foreach ($stories as $check_title) {
        if ($check_title->title == $request->title) {
            return redirect()
                ->route('writer.create', ['writer' => $authenticatedUserId->authId()])
                ->with('title_exists', 'Title already exists');
        }
    }

    $createNewRecordInDatabase->createRecord($writer->stories(), [
        'title' => $request->title,
        'story' => $request->story,
        'published_on' => date('m-d-Y'),
        'category_id' => $request->category_id
    ]);

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

Маршрут API: 

Route::post('/dashboard/writer/{writer}/store', 'Story\StoryController@store');

Vue компонент: 

<template>
<div class="row">
    <form class="col s12">
        <input type="hidden" name="_token" :value="csrf">

        <div class="row">
            <div class="col s12">
                <input  v-model="title" type="text" 
                        class="input-field" 
                        placeholder="Give it a catchy title" 
                        required
                        >
                <label for="title">Give it a catchy title</label>
            </div>
        </div>

        <div class="row">
            <div class="input-field col s12">
                <select v-model="category_id" name="category_id">
                     <option 
                        v-for="category in categories"
                        v-bind:key="category.id"
                        v-bind:value="category.id"
                        >{{ category.category }}
                     </option>
                </select>
            </div>
        </div>

        <div class="white col s12" id="editorjs"></div>

        <div class="col s12">
            <button @click="publishStory" class="btn waves-effect waves-light">Publish</button>
        </div>
    </form>

</div>


<script>

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import Link from '@editorjs/link';
import List from '@editorjs/list';
import Quote from '@editorjs/quote';

export default {
    props: ['categories', 'writer'],
    data() {
        return  {
            title: null,
            category_id: null,
            story: [],
            editor: new EditorJS({
                tools: {
                    header: {
                        class: Header,
                        inlineToolbar: true
                    }, 
                    list: {
                        class: List,
                        inlineToolbar: true
                    }, 
                    link: {
                        class: Link,
                        inlineToolbar: true
                    },
                    quote: {
                        class: Quote,
                        inlineToolbar: true
                    }
                }
            }),
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    },
    methods: {
        publishStory() {
            this.editor.save()
            .then(outputData => this.story = outputData.blocks)
            .catch(err => console.log(err))
            axios.post(`http://localhost:8000/api/dashboard/writer/${this.writer}/store`, {
                    title: this.title,  
                    story: this.story,
                    category_id: this.category_id,
                })
                .then(res => console.log(res))
                .catch(err => console.log(err))
        }

    },
    mounted() {}
}
</script>

1 Ответ

0 голосов
/ 15 февраля 2020

Попробуйте увеличить php .ini настройки 

max_input_time 
upload_max_filesize
post_max_size   
memory_limit
max_input_vars

PHP Усечение данных POST

...