CSRF 令牌不匹配错误，Laravel 5.3/VueJS2答案

【问题标题】：CSRF token mismatch error, Laravel 5.3/VueJS2CSRF 令牌不匹配错误，Laravel 5.3/VueJS2
【发布时间】：2017-06-06 01:31:56
【问题描述】：

我正在尝试完成我正在构建的应用程序的身份验证部分。我使用 Laravel 5.3 和 VueJs 2 作为我的 JS 框架。在我的登录组件中，我有一些类似的东西。

<template>
    <form @submit="test" method="POST" action="/test">
        <input v-model='input' type='text'>
        <button type='submit'>Submit</button>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                data: {
                    input: "hello"
                }
            }
        },
        mounted() {
            console.log('Component ready.')
        },
        methods: {
            test: function() {
                this.$http.post('/test', {
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name=_token]').attr('content')
                    }
                })
                .then(res => {
                    console.log(res);
                })
                .catch(err => {
                    console.error(err);
                });
            }
        }
    }
</script>

我还将 CSRF 令牌设置为 HTML 文档头部的元数据。 <meta name="_token" content="{{ csrf_token() }}">

Laravel 5.3 的 Illuminate\Foundation\Http\Middleware\VerifyCsrfToken 吐出错误，说存在令牌不匹配。我目前正在 var_dumping 输出所有传递给此类的 handle() 函数的 $request 信息。

public function handle($request, Closure $next)
    {
        var_dump($request);
        if (
            $this->isReading($request) ||
            $this->runningUnitTests() ||
            $this->shouldPassThrough($request) ||
            $this->tokensMatch($request)
        ) {
            return $this->addCookieToResponse($request, $next($request));
        }
        throw new TokenMismatchException;
    }

我没有看到 CSRF 令牌与我发送的 ajax 请求一起传递。奇怪的是，如果我不使用 ajax 并在表单标签内进行正常的表单提交，例如 {{csrf_field()}}，中间件会成功验证令牌。这让我相信这是我正在使用的 ajax/vue-resource 的问题。我可能做错了什么，但我已经搜索了有关此问题的 google 帖子/stackoverflow/youtube 视频，但没有解决该错误。我已经做了一个解决方法，我强制将 XSRF-TOKEN cookie 与令牌进行比较，但这让我想到了安全问题，以及当用户在使用应用程序时意外或不知情地删除了他们的 cookie 时会发生什么。不确定这是否会导致错误，但我已经与其他开发人员/工程师交谈过，他们说强制在中间件而不是 CSRF_TOKEN 中比较 cookie 不是一个好主意。

这是我尝试过的其他一些方法。

//I've tried the vue.http.interceptors method that comes with the bootstrap.js file Laravel generates for vue js 2.
Vue.http.interceptors() //something along those lines
//Setting ajax setup in bootstrap.js as wel

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

//I've also tried sending the token along with the vue-resource post request in the Vue component method as well.

methods: {
  test: function() {
    this.$http.post('/test', {headers: 'X-CSRF-TOKEN: $('meta[name='_token']'.attr('content')}
    ).then(response => console.log(response));
  }
}

//I've also tried using axios as my http client as well.

关于为什么会发生这种情况以及如何解决此问题的任何建议或见解？

【问题讨论】：

标签： ajax csrf laravel-5.3 vuejs2 vue-resource

【解决方案1】：

我会安装 Laravel Passport (https://laravel.com/docs/5.3/passport)

这实际上添加了您在前端通过 Vue 进行身份验证所需的一切。

它还为您的应用添加了 oAuth 支持，这意味着用户可以生成 API 密钥并使用他们自己的客户端来使用您的 API（如果您想这样做的话）。

【讨论】：