Vue cant get CSRF token from laravel blade

Question

I have a blade that have this code.

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

Then in my covid-form component i got a form like this:

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

My component script.

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

UPDATE: I dont have any errors in console. Tried it in postman with 127.0.0.1:8000/submitForm with post request. But everytime i submit i got "message": "CSRF token mismatch.", . Also i removed the @csrf in my blade because it is already in the header

Answer 1

You have to add the _token property to the axios data like you are doing with the others:

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

this is required for post requests.

And since you will set the data to axios, from the data function

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

You can remove this line

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

you are not using it at all.

Also you will need to set X-Requested-With headers to axios request, but probably you already have somenthing like 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.

You can read more on the docs:
CSRF Protection