vuejs2.0 httpでLaravelのTokenMismatchExceptionになってしまうとき

vuejshttpを使ったajaxのアクセス時にサーバ側でlaravelTokenMismatchExceptionになってしまう場合があります。

原因はリクエスト情報に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();
});

これでリクエスト情報にセットされると思います。


関連記事