时间戳

首页 > 解决方案 > Laravel：在 vanilla JS 中自动发送带有请求的 CSRF 令牌

javascript - Laravel：在 vanilla 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);

  // Submit the form
  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')
    }
});

但就我而言，没有使用这样的库。

标签： javascriptphpajaxlaravelcsrf-token

解决方案

你需要有

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

在您的页面中

然后在您的代码中，您可以使用查询选择器

document.querySelector('meta[name="csrf-token"]')['content']

要获取值，请使用“获取”api，这样您就可以附加标头。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers

推荐阅读