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

Posted 2023-02-24

【中文标题】使用 fetch API vuejs 上传文件返回 419 未知状态

【英文标题】：File upload with fetch API vuejs returns 419 unknown status

【发布时间】：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>

【问题讨论】：

***.com/questions/46466167/…

请检查我已将 csrf_token 添加到标题但它不起作用的代码

【参考方案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
            );
        
    );