Vue + Laravel Sanctum遇到CSRF令牌不符的419錯誤
<p>我收到一個「419（未知狀態）」錯誤，錯誤訊息為「CSRF令牌不符。」</p>
<p>POST http://127.0.0.1:8000/login 419（未知狀態）</p>
<p>CSRF令牌不符。</p>
<p>Laravel 伺服器：http://127.0.0.1:8000
<p>Vue 伺服器：http://localhost:8080</p>
<p>應用程式/Http/Kernel.php</p>
<pre class="lang-php Prettyprint-override"><code>'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class，
'節流閥：API',
\Illuminate\Routing\Middleware\SubstituteBindings::class，
],
</代號></pre>
<p>應用程式/模型/User.php</p>
<pre class="lang-php Prettyprint-override"><代碼><?php
命名空間 App\Models；
使用 Illuminate\Database\Eloquent\Factories\HasFactory;
使用照亮\通知\可通知；
使用 Laravel\Sanctum\HasApiTokens；
User 類別擴充了 Authenticatable
{
使用 HasApiTokens、HasFactory、Notifying；
//...
}
</代號></pre>
<p>配置/cors.php</p>
<pre class="lang-php Prettyprint-override"><代碼><?php
返回 [
'路徑' => [
'api/*',
'聖所/csrf-cookie',
'登記'，
'登入',
],
'allowed_methods' =>; ['*'],
'allowed_origins' =>; ['*'],
'allowed_origins_patterns' =>; [],
'allowed_headers' =>; ['*'],
'expose_headers' =>; [],
'最大年齡' => 0,
'supports_credentials' =>;真的，
];
</代號></pre>
<p>.env</p>
SESSION_DRIVER=cookie
SESSION_DOMAIN=本機主機
SANCTUM_STATEFUL_DOMAINS=本機:8080</pre>
<p>src/main.js</p>
<程式碼>axios.interceptors.request.use((config) => {
config.baseURL = 'http://127.0.0.1:8000'
config.withCredentials = true
返回配置
})
</代號></pre>
<p>src/views/auth/Login.vue</p>
<pre class="lang-js Prettyprint-override"><code>從 'axios' 導入 axios
從“@vue/reactivity”導入{reactive}；
導出預設值{
設定() {
const 憑證 = 反應式({
電子郵件： ''，
密碼： ''，
})
const 登入 = async () => {
axios.get('/sanctum/csrf-cookie').then( async () => {
讓回應 =等待 axios.post('/登入', 憑證)
控制台.log(響應);
});
}
回傳 { 登入名，憑證 }
}
};
</code></pre></p>