Laravel 5中使用Dropzone.js上传图片遇VerifyCsrfToken错误求助

别担心，这个问题很常见——Laravel的VerifyCsrfToken中间件会拦截所有没有合法CSRF令牌的POST请求，而Dropzone默认不会自动带上这个令牌，哪怕你没用到form标签，也有几种简单的方法解决：

方法1：在Dropzone请求头里添加CSRF令牌 #

这是最直接的方式，先确保你的页面<head>里已经有CSRF元标签（Laravel项目默认会有，没有的话手动加）：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在Dropzone的配置中，给请求加上X-CSRF-TOKEN头：

// 如果是通过HTML元素自动初始化的Dropzone
Dropzone.options.yourDropzoneElementId = {
  url: "/your-upload-endpoint", // 替换成你的上传接口地址
  headers: {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
  }
};

// 如果是手动初始化Dropzone实例
const dropzone = new Dropzone("#your-dropzone-element", {
  url: "/your-upload-endpoint",
  headers: {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
  }
});

方法2：在上传时把令牌加入表单数据 #

如果你更习惯把令牌作为表单参数发送，可以利用Dropzone的sending事件，在请求发送前把_token字段加到formData里：

Dropzone.options.yourDropzoneElementId = {
  url: "/your-upload-endpoint",
  sending: function(file, xhr, formData) {
    // 把CSRF令牌添加到表单数据中
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
  }
};

小提示 #

• 确认你的上传路由定义在web.php里（Laravel默认会给web路由应用CSRF验证），如果是api.php路由，默认不会触发这个验证，但出于安全考虑，建议上传接口还是用web路由并带上令牌。
• 如果你用的不是Blade模板，需要从后端获取CSRF令牌的值（比如通过接口返回），再填充到meta标签或者直接用在JS里。

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