Laravel集成Filepond上传图片时出现419错误求助

核心问题：请求头配置拼写错误 #

你代码里的FilePond server配置中，请求头的键写成了header（单数），但FilePond要求的是headers（复数），这直接导致CSRF Token没有被正确添加到请求头，触发419错误。

修改后的前端代码 #

// Get a reference to the file input element
const inputElement = document.querySelector('input[name="image"]');

// Create a FilePond instance
const pond = FilePond.create(inputElement);
const token =  $('meta[name="csrf-token"]').attr('content');

FilePond.setOptions({
    server: {
        process: '{{ route('admin.tmp-file-pond-upload') }}',
        revert: '{{ route('admin.tmp-file-pond-delete') }}',
        // 修正为复数headers
        headers: {
            'X-CSRF-TOKEN': token,
        },
    },
});

额外排查点 #

• 确认Token获取正常：在浏览器控制台打印token值，确保能正确读取meta标签里的CSRF Token
• 清除路由缓存：执行php artisan route:clear，避免路由缓存导致的匹配异常
• 备选方案：从Cookie获取Token
  Laravel默认会把CSRF Token存入XSRF-TOKEN Cookie中，可通过原生JS读取，无需依赖jQuery：

  function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
              const cookie = cookies[i].trim();
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
  }
  const token = getCookie('XSRF-TOKEN');
  

后端代码优化（可选） #

FilePond期望接口返回JSON格式响应，包含location字段用于后续文件关联，建议修改控制器方法：

public function tmpFilepondUpload(Request $request)
{
    if ($request->hasFile('image')) {
        $image = $request->file('image');
        // 将文件存储到临时目录，返回存储路径
        $path = $image->store('tmp', 'public');
        return response()->json(['location' => $path]);
    }
    return response()->json(['error' => 'No file uploaded'], 400);
}

内容的提问来源于stack exchange，提问作者Tuğran Demirel