使用 fetch API vuejs 上传文件返回 419 未知状态答案

【问题标题】：File upload with fetch API vuejs returns 419 unknown status使用 fetch API vuejs 上传文件返回 419 未知状态
【发布时间】：2018-08-26 13:02:09
【问题描述】：

我正在使用 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>

【问题讨论】：

stackoverflow.com/questions/46466167/…
请检查我已将 csrf_token 添加到标题但它不起作用的代码

标签： laravel vue.js fetch

【解决方案1】：

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

对于那些面临同样问题的人来说，这似乎是由于默认的credentials 设置（默认为“省略”），它出于某种原因基本上省略了 csrf 标头。您可以根据需要将credentials 更改为“same-origin”或“include”来解决此问题。

例子：

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
            });
        }
    );

【讨论】：