Laravel：使用原生JS自动发送CSRF令牌的请求

8 浏览
0 Comments

Laravel：使用原生JS自动发送CSRF令牌的请求

我在我的Laravel项目中使用了通过Composer安装的一个包。它包含一些用于文件上传的JS代码。至少在某种情况下，由于请求中没有携带CSRF令牌，上传失败。

我希望在不编辑供应商代码的情况下解决这个问题。下面是相关的JS代码：

self.upload = function (file, filename) {
  var formData = new FormData();
  formData.append('file', file, filename);
  formData.append('field', JSON.stringify(field));
  formData.append('contentId', H5PEditor.contentId || 0);
  // 提交表单
  var request = new XMLHttpRequest();
  request.upload.onprogress = function (e) {
    if (e.lengthComputable) {
      self.trigger('uploadProgress', (e.loaded / e.total));
    }
  };
  // ...
}

有没有办法让Laravel自动发送类似于这样的请求的CSRF令牌？

使用Axios，我会这样做

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

使用jQuery，我会这样做

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

但在我的情况下，没有使用这样的库。

0

1 答案

0 Comments

Laravel中自动在vanilla JS中发送CSRF令牌的问题

在使用Laravel时，我们需要在页面中添加<meta name="csrf-token" content="{{ csrf_token() }}" />，然后可以使用查询选择器document.querySelector('meta[name="csrf-token"]')['content']来获取CSRF令牌的值。为了将CSRF令牌自动发送到服务器，我们可以使用fetch API，并附加请求头。

但是，仅仅以上的操作是不够的。以上的操作仅仅展示了如何将令牌发送到HTML页面。实际上，问题是如何在AJAX请求中将令牌发送回服务器。关于如何在AJAX请求中发送令牌，可以参考laravel官方文档中的说明：laravel.com/docs/7.x/csrf#csrf-x-csrf-token

0