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

Posted 2023-02-22

【中文标题】CSRF 令牌不匹配错误，Laravel 5.3/VueJS2

【英文标题】：CSRF token mismatch error, 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 帖子/***/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.

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

【参考方案1】：

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

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

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