Vue 无法从 laravel blade 获取 CSRF 令牌

Question

我有一个 blade 有这个代码。

<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>

更新：我在控制台中没有任何错误。在 postman 中用 127.0.0.1:8000/submitForm 和 post 请求尝试过。但是每次我提交我都会得到 "message": "CSRF token mismatch.", 。我还删除了 blade 中的 @csrf，因为它已经在 header

中

Answer 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 headers 到 axios 请求，但可能你已经有了 this.

之类的东西

The VerifyCsrfToken middleware, which is included in the web middleware group, will automatically verify that the token in the request input matches the token stored in the session.

您可以阅读更多文档：
CSRF Protection

Vue 无法从 laravel blade 获取 CSRF 令牌

Vue cant get CSRF token from laravel blade

javascript

php

csrf

laravel

vue.js