Vue无法从Laravel刀片获得CSRF令牌

Question

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

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

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

  <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，因为它已经在标题中

Answer 1

如果令牌值是像a0msAQh0aYZwDVZtn195awDi8gHChrWlWZYDReZh这样的字符串，则Laravel代码在vue代码之前运行；所以写这样的道具

<covid-form :csrf-token="{{ csrf_token() }}">
  @csrf
</covid-form>

vue编译器将解释如下：

<covid-form :csrf-token="a0msAQh0aYZwDVZtn195awDi8gHChrWlWZYDReZh">
  @csrf
</covid-form>

并且它将期望一个名为a0msAQh0aYZwDVZtn195awDi8gHChrWlWZYDReZh的属性或方法。

这就是例外的原因：

属性或方法“ a0msAQh0aYZwDVZtn195awDi8gHChrWlWZYDReZh”未在实例上定义，但在渲染期间被引用。

您可以通过将变量的值作为文本传递给v-bind并添加单引号来避免这种情况。

// Laravel reads
<covid-form :csrf-token="'{{ csrf_token() }}'">
// Vue reads
<covid-form :csrf-token="'a0msAQh0aYZwDVZtn195awDi8gHChrWlWZYDReZh'">

或者，您可以简单地省略v-bind冒号并将其作为静态属性传递：

// Laravel reads
<covid-form csrf-token="{{ csrf_token() }}">
// Vue reads
<covid-form csrf-token="a0msAQh0aYZwDVZtn195awDi8gHChrWlWZYDReZh">