Vue не могу получить токен CSRF от laravel blade - PullRequest
Новая
       32

Vue не могу получить токен CSRF от laravel blade

1 голос
/ 02 апреля 2020

У меня есть блейд с этим кодом. 

<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 в своем блейде, потому что он уже находится в заголовке

1 Ответ

0 голосов
/ 02 апреля 2020

Вы должны добавить свойство _token к данным топора ios, как вы делаете с остальными: 

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

это требуется для post запросов.

И так как вы установите данные как ax ios, из функции данных 

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 заголовки для запроса ax ios, но, вероятно, у вас уже есть somenthing, как this .

VerifyCsrfToken middleware , входящий в группу промежуточного программного обеспечения web, автоматически проверит, соответствует ли токен во входном запросе токену, сохраненному в сеансе.

Вы можете прочитать больше в документах:
CSRF Защита

...