Vue 无法从 laravel 刀片获取 CSRF 令牌

Posted 2023-03-15

【中文标题】Vue 无法从 laravel 刀片获取 CSRF 令牌

【英文标题】：Vue cant get CSRF token from laravel blade

【发布时间】：2020-07-13 22:39:53

【问题描述】：

我有一个带有此代码的刀片。

<meta name="csrf-token" content=" csrf_token() ">
<covid-form>
 </covid-form>

然后在我的 covid-form 组件中，我得到了一个这样的表单：

  <form @submit.prevent="send">
 <input type="hidden" name="_token" :value="csrf">

我的组件脚本。

<script>
    export default 
        data()

            return
                csrf: document.head.querySelector('meta[name="csrf-token"]').content,
                fullname:'',
                phone:'',
                nationality:'',
                have_not_travelled_to_china:false,
                have_not_travelled_to_others:false,
                have_not_travelled_to_asian:false,
                no_issue_to_stay_home:false,
                no_symptomps:false,
                dont_have_close_contact:false,

                signDate:new Date(),
                    opts:
                        format: 'YYYY-MM-DD',
                        showClear: true,
                        showClose: true,
                        useCurrent: false,
                    ,
                date: new Date(),
                    opt:
                        format: 'YYYY-MM-DD HH:mm A',
                        showClear: true,
                        showClose: true,
                        useCurrent: false,
                    

            
        ,
       created()
           console.log(this.csrf)
       ,
        methods:
           async send()
                   let loader = this.$loading.show(
                            container: this.fullPage ? null : this.$refs.formContainer,
                            onCancel: this.onCancel,
                            color: '#c91010',
                            loader: 'bars',
                            width: 80,
                            height: 100,
                )
               await axios.post('/submitForm',
                    agent_name: this.fullname,
                    phone: this.phone,
                    nationality: this.nationality,
                    have_not_travelled_to_china: this.have_not_travelled_to_china,
                    have_not_travelled_to_others: this.have_not_travelled_to_others,
                    have_not_travelled_to_asian: this.have_not_travelled_to_asian,
                    no_issue_to_stay_home: this.no_issue_to_stay_home,
                    no_symptomps: this.no_symptomps,
                    dont_have_close_contact: this.dont_have_close_contact,
                    signDate: this.signDate,
                    date: this.date
                )
                    .then(()=>
                         swal.fire(
                            title: 'Success!',
                            icon: 'success',
                            width: '500px'
                        );
                        loader.hide() 
                    )
            
        
    
</script>

更新： 我在控制台中没有任何错误。在邮递员中使用127.0.0.1:8000/submitForm 进行了尝试，并提出了发布请求。但是每次我提交我都会得到"message": "CSRF token mismatch.",。我还删除了刀片中的@csrf，因为它已经在标题中

【参考方案1】：

您必须像处理其他数据一样将 _token 属性添加到 axios 数据中：

await axios.post('/submitForm',
  _token: this.csrf,
  agent_name: this.fullname,
  // ...
)

这是post 请求所必需的。

而且由于您将数据设置为 axios，从数据函数

data() 
  return
    csrf: document.head.querySelector('meta[name="csrf-token"]').content,
    agent_name: this.fullname,
    //...
  ,
,

您可以删除此行

<input type="hidden" name="_token" :value="csrf">

你根本没有使用它。

您还需要将 X-Requested-With 标头设置为 axios 请求， 但可能你已经有了this 之类的东西。

VerifyCsrfToken middleware 包含在 web 中间件组中，将自动验证请求输入中的令牌与会话中存储的令牌是否匹配。

您可以在文档中阅读更多内容：CSRF Protection

【讨论】：

我更新了答案。您缺少将令牌添加到您通过 axios 发送的数据中

当我添加Accept: application/json 时，为什么我在邮递员中得到CSRF token mismatched。但是当我不添加它时，我得到了Page Exlpired

CSRF Protection web 中间件内部的路由需要一些带有会话信息的标头，但在邮递员中您没有该信息，因此出现 Page Expired 因为您的 csrf 令牌验证失败.你可以阅读关于使用 postman 和 laravel web 中间件here。 CSRF 令牌不匹配可能是因为缺少 _token 输入，这是发布请求所必需的。

好吧，我明白了。这就是为什么它总是这样说。谢谢先生的回答：）