Тест на localhost
Перечислю основные части для максимальной краткости.
Каждый раз (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-запросах на таком простом примере?
Средний
Средний
Средний
