NUXT | Ошибка 419 CSRF token mismatch при отправке post-запроса

Question

Отправляю axios запрос:

async login(state, data) {
    console.log('Logggin');
    console.log(data);
    this.$axios.post('http://127.0.0.1:8000/api/login', {phone:'88005553535',password:'123456789'},
    {
        header:{
        "Access":'application/json'
    }}).then(data => {
        console.log("Logined");
        console.log(data);
    });
},

В ответ мне приходит:

Почему возникает эта проблема? P.S Можете просить у меня фрагменты кода, просто не знал, что вставить

Answer 1

Это срабатывает CSRF защита Laravel, все POST запросы должны содержать CSRF- токен,который вам надо указать в заголовке запроса(секции Header)

headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }

предварительно в Blade шаблоне в секции <head> вставьте следующий код:

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

подробнее можно почитать в официальной документации к Laravel (https://laravel.su/docs/8.x/csrf). Лично я, когда пишу фронтэнд под Laravel, в app.js указываю следующий код: let token = document.head.querySelector('meta[name="csrf-token"]'); window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

теперь каждый axios.post запрос будет отправляться с этим токеном, и отпадает необходимость указывать его при каждом POST запросе.

БЛОГ НА HUSL

NUXT | Ошибка 419 CSRF token mismatch при отправке post-запроса

Ответы (1 шт):