我正在使用 Laravel 与 Vue 的默认集成（不是使用 Vue CLI 的单独项目）。我正在尝试对用户进行身份验证，但它总是显示 419 错误。我已将 csrf 令牌包含到 Axios 的标头中，但它仍然提供不匹配错误。
引导程序.js
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.withCredentials = true;
window.axios.defaults.baseURL = "http://localhost:8000/";
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');
内核.php
'api' => [
EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
]
cors.php
'paths' => [
'api/*',
'/login',
'/logout',
'/sanctum/csrf-cookie'
],
.
.
.
'supports_credentials' => true,
网页.php
Route::get('/{any?}', function() {
return view('welcome');
});
Route::post('/login', 'AuthController@login');
Route::post('/logout', 'AuthController@logout');
登录模式.vue
<template>
<form @submit.prevent="submit" method="POST">
<input type="text" class="form-control" placeholder="Email" v-model="email" />
<input
type="password"
class="form-control"
placeholder="Password"
v-model="password"
/>
<button>SIGN IN</button>
</form>
</template>
<script>
import { mapActions } from 'vuex'
export default {
data() {
return {
email: '',
password: '',
}
},
methods: {
...mapActions('user', ['login']),
async submit() {
await this.login({
email: this.email,
password: this.password,
})
this.$router.replace({ name: 'Topic' })
},
},
}
</script>
用户.js | Vuex 模块
async login({ dispatch }, credentials) {
await axios.get('/sanctum/csrf-cookie')
await axios.post('/login', credentials)
return dispatch('me')
},
我正在配置与本文类似的项目。他是一个单独的项目，而我在 Laravel 项目中。我还参考了 Laravel 关于配置身份验证的 sanctum 文档，但它仍然不起作用。回顾了很多 StackOverflow 问答，到目前为止还没有运气。大多数人都在谈论向 Axios 添加 CSRF 标头，我已经在 bootstrap.js. 我确实尝试包括一个隐藏的输入来保存 CSRf，但仍然没有运气。