vuejs2.0 httpでLaravelのTokenMismatchExceptionになってしまうとき
vuejsのhttpを使ったajaxのアクセス時にサーバ側でlaravelのTokenMismatchExceptionになってしまう場合があります。
原因はリクエスト情報にcsrf_tokenがないのが原因です。
Laravel5.3ではインストール時にvuejsのサンプルが初期設定されています。
そのソースのbootstrap.jsで以下のようにhttpのヘッダにcsrf_tokenをセットしています。
Vue.http.interceptors.push((request, next) => {
request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken; //ここでリクエストのヘッダにセット
next();
});しかしリクエスト情報を確認してみるとX-CSRF-TOKENがセットされていませんでした。
Laravel5.3に組み込まれているvuejsはバージョンが1なので、2.0だと少しセットの仕方を変える必要があるようです。
Vue.http.interceptors.push((request, next) => {
//request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken); //変更
next();
});これでリクエスト情報にセットされると思います。