使用表单数据添加 laravel CSRF 令牌

Posted 2023-02-24

【中文标题】使用表单数据添加 laravel CSRF 令牌

【英文标题】：Adding laravel CSRF token with form data

【发布时间】：2017-04-13 12:30:23

【问题描述】：

通过所见即所得编辑器上传图像时，我需要使用 FormData() 传递 Laravel CSRF 令牌。但它似乎失败了，或者它没有使用append() 方法添加 csrf 令牌。

这是我的代码：

  function uploadImage( image ) 
    var data = new FormData();
    data.append( "image", image );

    data.append( "csrfToken", Laravel.csrfToken ); // <- adding csrf token
    // Laravel.csrfToken will return the csrf token.

    console.log( data.entries() );
    $.ajax (
      data: data,
      type: "POST",
      url: "/article/store/image",
      cache: false,
      contentType: false,
      processData: false,
      success: function(url) 
        var image = IMAGE_PATH + url;
          $( '#editor' ).summernote( "insertImage", image );
        ,
        error: function( data ) 
          console.log( data );
        
    );
  

它没有在表单数据中添加 laravel csrf 令牌，因为我仍然收到错误

VerifyCsrfToken.php 第 68 行中的 TokenMismatchException

如何在表单数据中添加令牌？

【问题讨论】：

Laravel.csrfToken 返回什么？

@SaumyaRastogi 只是令牌字符串。

【参考方案1】：

您应该添加一个名为 - _token 的字段，而不是像这样的 csrfToken：

data.append( "_token", Laravel.csrfToken ); // <- adding csrf token

这就是 Laravel 的辅助方法 - csrf_field() 所做的。

根据Laravel Docs，在 Ajax 调用的情况下 - 例如，您可以将令牌存储在 html 元标记中：：

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

然后像这样包含在您的 ajax 标头中：

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

希望这会有所帮助！

【参考方案2】：

对于 ajax 请求，我喜欢使用 $.ajaxSetup 设置一次。

在我的布局中：

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

在我的 app.js 中：

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

这让我不必记住将 _token 输入附加到每个请求。

【参考方案3】：

虽然@Saumya 已经回答了这个问题，但我使用标头发送 CSRF 令牌，如下所示：

$.ajax (
  data: data,
  type: "POST",
  headers: 'X-CSRF-TOKEN': Laravel.csrfToken ,
  url: "/article/store/image",
  cache: false,
  contentType: false,
  processData: false,
  success: function(url) 
    var image = IMAGE_PATH + url;
      $( '#editor' ).summernote( "insertImage", image );
    ,
    error: function( data ) 
      console.log( data );
    
);  

如果您在整个应用程序中使用 ajax 发送多个请求，您可以一次为每个请求全局设置它：

$.ajaxSetup(
headers: 
    'X-CSRF-TOKEN': Laravel.csrfToken

);

了解更多Here