使用提取 API vuejs 上传文件返回 419 未知状态

Question

我正在使用VUE.js和Laravel使用fetch api上传文件。我已将 csrf 令牌添加到请求的标头中，但仍获得 419 未知状态。任何帮助将不胜感激。

这是组件的 JS

<script>
    export default {
        name:'UploadModal',
        data(){
            return {
                image:'',
                ext:'',
                file:''
            };
        },
        methods: {
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.file = files[0];
                this.createImage(files[0]);
            },
            uploadArtwork: function () {
                let formData = new FormData();
                formData.append('artwork', this.file);
                fetch(this.$parent.itemUrl, {
                    method:'POST',
                    body: formData,
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'X-CSRF-TOKEN' : Laravel.csrfToken
                    }
                })
                    .then(res => res.json())
                    .then(res => {
                        alert(res);
                    })
                    .catch(e => console.log(e));
            },
            createImage(file) {
                var image = new Image();
                var reader = new FileReader();
                var vm = this;
                reader.onload = (e) => {
                    vm.image = e.target.result;
                };
                reader.readAsDataURL(file);
            },
        }
    }
</script>

Answer 1

我知道

这是一个老问题，但是在使用fetch时我也遇到了这个问题，链接的答案(Laravel 5.5 ajax call 419(未知状态((没有帮助，因为这与jQuery的Ajax方法有关。

对于那些面临相同问题的人来说，这似乎是由于默认的credentials设置(默认为"省略"(，由于某种原因，它基本上省略了 csrf 标头。您可以根据需要将credentials更改为"同源"或"包含"来解决此问题。

例：

fetch("/leads", {
        method: 'POST',
        credentials: "same-origin",
        headers: csrf_header
    }).then(res => res.json())
    .then(
        (json) => {
            this.setState({
                isLoaded: true,
                items: json.leads.data,
                sort: json.sort,
                search: json.search,
                sort_by: json.sort_by,
                filter: json.filter
            });
        }
    );