Как исправить ошибку 419 при загрузке файлов через vue.js в Laravel?

Question

[Евгений Хрипунов]

Имеется компонент ExampleComponent.vue для загрузки файлов, который отправляет post запрос на /upload

<template>
    <vue-clip :options="options" class="uploader">
        <template slot="clip-uploader-body" slot-scope="props">
            <div class="uploader-files">
                <div class="uploader-file" v-for="file in props.files">
                    <div class="file-avatar">
                        <img v-bind:src="file.dataUrl" alt="">
                    </div>
                    <div class="file-details">
                        <div class="file-name">
                            {{file.name}}
                        </div>
                        <div class="file-progress" v-if="file.status !== 'error' && file.status !== 'success'">
                            <span class="progress-indicator" v-bind:style="{width: file.progress +'%'}"></span>
                        </div>
                        <div class="file-meta" v-else="">
                            <span class="file-size">{{file.size}}</span>
                            <span class="file-status">{{file.status}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template slot="clip-uploader-action">
            <div class="uploader-action">
                <div class="dz-message">
                    Drop your files here or browse
                </div>
            </div>
        </template>
    </vue-clip>
</template>

<script>
    export default {
        name: 'app',
        data: function () {
            return {
                options: {
                    url: '/upload',
                    paramName: 'file',
                }
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

В web.php прописан роут:

Route::post('/upload',function (\Illuminate\Http\Request $request){
    $path = $request->file('file')->store('files');
    return 'success';
});

В итоге выдает 419 ошибку, csrf токен в заголовке шаблона присутствует.

Подскажите пожалуйста, в чем может быть проблема?

Update: В options после paramName: 'file' нужно добавить headers: window.axios.defaults.headers.common
Спасибо всем кто помог :)

Comments

[JhaoDa]

Попробуйте прочитать документацию, там есть ответ. Да, согласен, очень необычно — в документации есть ответ...

Answer 1

[Konstantin Malyarov]

Права доступа к папке, куда записывается - какие? (chmod 666?) Хотя может выскакивать 403 ошибка.

И да, вы не указываете csrf в загрузке файла.
Можно ваш кусок кода, который отвечает за отправку?

let formData = new FormData()
            formData.append('file', this.file)
            axios.defaults.xsrfCookieName = 'csrftoken'
            axios.defaults.xsrfHeaderName = 'X-CSRFToken'
            axios.post('http://' + window.location.host + '/api/tokens_VMP_excel/',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: function (progressEvent) {
                        this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
                    }.bind(this)
                }
            ).then(function (response) {
                if (response.status === 204) {
                    self.is_completed = true
                }
            }).catch(function (error) {
                console.log(error);
            });

Вот так выглядит мой, а Ваш как?

Comments

[Евгений Хрипунов]

Права доступа к папке точно не влияют, так как в Route::post(‘/upload’...) оставляю просто return true без сохранения файла и ошибка все равно остаётся

[Евгений Хрипунов]

Я реализовывал как на данном видео https://youtu.be/84_SwbPWjKo и там не было кода для отправки. Насколько я понимаю, файл отравляется при «перетаскивании»

[Konstantin Malyarov]

Евгений Хрипунов, вот тут вы ошибаетесь. Файл все равно сохраняется, временно но сохраняется.

[Konstantin Malyarov]

Евгений Хрипунов, только что заметил... Где ваш X-CSRFToken? Тот что в cookies не считается.
После
paramName: 'file',
Добавьте
X-CSRFToken: 'тут ваш токен, который надо взять из cookies',