tol64
@tol64

Laravel + Nuxt: Как победить ошибку 419 — CSRF token mismatch?

Тест на localhost

  • Серверная часть приложения на Laravel для API-запросов: localhost:8080
  • Клиентская часть на Nuxt: localhost:3000


Перечислю основные части для максимальной краткости.

Каждый раз (Nuxt), загружая любую страницу (localhost:3000), перед отрисовкой в методе nuxtServerInit(), делается post-запрос для получения данных:

export const actions = {
    async nuxtServerInit({ state }) {
        await this.$axios.post('/init')
        .then((result) => {
            state.data = result.data;
        });
    }
}


В контроллере (Laravel), отправляем в ответе токен:

public function index(Request $request)
    {
        $state = array(
            'token' => csrf_token()
        );
    
        return json_encode($state);
    }


В файле app\Http\Kernel.php:

protected $middlewareGroups = [
        ...
        'api' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,

            \App\Http\Middleware\VerifyCsrfToken::class,

            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];


Чтобы этот запрос не был отклонён нужно указать исключение главного маршрута в app\Http\Middleware\VerifyCsrfToken.php :

class VerifyCsrfToken extends Middleware
{
    protected $except = [
        'api/init'
    ];
}


Теперь для теста создадим vue-страницу с формой (ниже сокращённая версия) и отправку будем осуществлять пользовательским методом:

<form @submit.prevent="submit">
	...
</form>


Ниже скриптовая часть на этой же странице. Здесь получаем токен из хранилища, который ранее получили в запросе перед отрисовкой страницы в методе nuxtServerInit().

<script>
export default {
    components: {
    },
    data() {
        return {
            form: {
                _token: this.$store.getters.params.token,
                name: '',
                email: '',
                message: ''
            }
        }
    },
    methods: {
        async submit() {
            await this.$axios.post('contacts', this.form)
            .then((result) => {
                console.log('post >', result.data);
            });
        }
    }
}
</script>


Пробуем отправить данные из формы и получаем ошибку:

419: CSRF token mismatch.

Что в этой схеме неправильно? Как получить токен, который затем можно использовать в post-запросах на таком простом примере?
  • Вопрос задан
  • 866 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Kostik_1993
Fullstack Web Developer | PHP | Laravel | Vue.js
CSRF при Nuxt и Laravel не нужен. Вы вообще все делаете неверно. Советую сначала изучить основы используемых инструментов
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы