2017-10-16 1 views
0

mon fichier home.blade comme ci-dessousCSRF pas trouvé d'erreur dans Laravel en utilisant VueJs

<div id="new"> 
      <form class="form-horizontal" role="form" enctype="multipart/form-data" method="POST" v-on:submit.prevent="addPost"> 
      <h4>@{{message}}</h4> 
      <div class="form-group" style="padding:14px;"> 
       <textarea v-model="content" class="form-control" placeholder="Update your status"> </textarea><br> 
       <button class="btn btn-primary pull-right" type="submit">Post</button> 
      </div> 
      </form> 
     </div> 

et mes app.js en vue comme ci-dessous

const app = new Vue({ 
    el: '#new', 
    data: { 
     message: 'Update New Post:', 
     content: '', 
    }, 

    methods:{ 

     addPost(){ 
      axios.post('/home/addPost', { 
       content: this.content 
      }) 
      .then(function(response) { 
       console.log(response); 
      }) 
      .catch(function(error) { 
       console.log(error); 
      }); 
     } 
    } 
}); 

et j'ai créer un itinéraire dans le Web. php comme ci-dessous

Route::post('addPost', '[email protected]'); 

et le contrôleur comme ci-dessous

public function addPost(Request $request) { 

     $content = $request->content; 

     $createpost = DB::table('post') 
      ->insert(['content' => $content, 
       'user_id' => Auth::user()->id, 
       'status' => 0, 

      ]); 

    } 

mais dans la console, il donnera une erreur comme ci-dessous comment puis-je faire de ce droit s'il vous plaît aidez-moi

app.js:11623 CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token 

app.js:893 POST http://127.0.0.1:8000/home/addPost 404 (Not Found) 
Error: Request failed with status code 404 
    at createError (app.js:918) 
     at settle (app.js:41630) 
     at XMLHttpRequest.handleLoad (app.js:792) 

Répondre

0

Vous devez ajouter le champ _token dans les données si vous voulez envoyer la demande post ajax.

data: { 
     message: 'Update New Post:', 
     content: '', 
     _token: '{{csrf_token()}}' 
    }, 
0

Avant de pouvoir faire une demande à laravel, vous devez ajouter le jeton csrf à votre demande. Le défi lors de l'utilisation d'ajax est que vous devez spécifier manuellement ce jeton sinon votre requête ne sera pas acceptée. Cette méthode fonctionne actuellement pour moi. Dans votre code html, le code ajoutez cette ligne <meta name="csrf_token" content ="{!!csrf_token()!!}" /> comme indiqué ci-dessous

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>My App</title> 
    <meta name="csrf_token" content ="{!!csrf_token()!!}" /> 

Ajouter ce au sommet de votre VueJs code: Vous dites Vue d'inclure jeton CSRF dans toutes les demandes partir

//App.js 

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf_token"]').getAttribute('content'); //add token; 


const app = new Vue({ 
    el: '#new', 
    data: { 
     message: 'Update New Post:', 
     content: '', 
    }, 

    methods:{ 

     addPost(){ 
      axios.post('/home/addPost', { 
       content: this.content 
      }) 
      .then(function(response) { 
       console.log(response); 
      }) 
      .catch(function(error) { 
       console.log(error); 
      }); 
     } 
    } 
});