Vue3使用Filepond上传图片出现419错误，请求排查解决

我在Vue3中使用filepond库上传图片时，请求返回419 error。已尝试在请求头中携带CSRF令牌，但不确定传参方式是否正确，需要排查解决帮助。

组件代码 #

<file-pond
        name="back_dni"
        ref="pond"
        class-name="my-pond"
        label-idle="DNI trasero"
        allow-multiple="false"
        accepted-file-types="image/jpeg, image/png"
        v-on:init="handleFilePondInit"
        server="/commercial/uploadDocuments" 
    />

脚本代码 #

// 创建Filepond所需的所有导入
.....

// Create FilePond component
const FilePond = vueFilePond(FilePondPluginImagePreview,FilePondPluginFileValidateType);

setOptions({
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
    server: {
        process: {
        url: '/commercial/uploadDocuments',
        method: 'POST',
        withCredentials: false,
        onload: (response) => response.key,
        onerror: (response) => response.data,
        ondata: (formData) => {
            formData.append('Hello', 'World');
            return formData;
        },
    },
        revert: './revert',
        restore: './restore/',
        load: './load/',
        fetch: './fetch/',
    }
});

export default {
    name: 'uploadDniBack',
    data: function () {
        return { 
            myFiles: [] 
        };
    },
    
    methods: {
        handleFilePondInit: function () {
            // example of instance method call on pond reference
            this.$refs.pond.getFiles();
        },
    },
    components: {
        FilePond,
    },
};

排查及解决步骤 #

• 修正CSRF令牌获取方式：如果项目未引入jQuery，$('meta[name="csrf-token"]')会失效，换成原生DOM获取：

  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
  

• 移除重复的server配置：组件标签和setOptions中都配置了server地址，会导致冲突。删除组件上的server="/commercial/uploadDocuments"属性，统一使用脚本内的server配置。
• 验证请求头中的令牌：打开浏览器开发者工具的Network面板，查看上传请求的Request Headers，确认X-CSRF-TOKEN字段存在且值与页面meta标签一致。
• 检查后端CSRF规则：若后端是Laravel，确保上传路由在web中间件组下，且未被排除在CSRF验证之外；同时确认令牌未过期。
• 调整formData参数：ondata中添加的Hello: World如果不是后端所需字段，建议移除，避免不必要的参数干扰。

内容的提问来源于stack exchange，提问作者scorpions77