2016-11-29 15 views
3

wysiwygエディタで画像をアップロードするときに、FormData()のLaravel CSRFトークンを渡す必要があります。しかし、失敗するか、append()メソッドを使用してcsrfトークンを追加しないようです。ここでフォームデータでlaravel CSRFトークンを追加する

は私のコードです:

まだ私がVerifyCsrfToken.phpでエラー

TokenMismatchExceptionを取得していますので、そのフォームデータをlaravelの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); 
     } 
    }); 
    } 

enter image description here

ライン68

フォームデータにトークンを追加する方法は?

+0

何 'Laravel.csrfToken'リターンを学ぶのか? –

+0

@SaumyaRastogiはトークン文字列です。 – rakibtg

答えて

7

あなたが名前のフィールドを追加する必要があり - 代わりに、このようなcsrfTokenの、_tokenを:

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

これは何Laravelのヘルパーメソッドです - csrf_field()ありません。アヤックスの場合Laravel Docsによると

は、呼び出す - あなたは、例えば、HTMLのmetaタグ::

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

にトークンを保存してから、このようなあなたのAjaxヘッダに含めることができます

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

希望します。

2

ajaxリクエストについては、$ .ajaxSetupを使用して1回設定します。私のレイアウトで

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

私app.jsで:

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

これは私がすべてのリクエストに_token入力を追加することを忘れないように手間を省くことができます。

2

@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

関連する問題