Vue + Laravel Sanctum遇到CSRF令牌不符的419錯誤

Question

<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>

Answer 1

我在處理這個相同問題上遇到了困難。經過幾次搜索，我找到了這個頁面。在看到可能的建議解決方案後，我修改了

SANCTUM_STATEFUL_DOMAINS=localhost:8080

為

SANCTUM_STATEFUL_DOMAINS=http://localhost:8080

然後就好了！它正常工作了！ ！

Answer 2

您將SANCTUM_STATEFUL_DOMAINS設定為localhost:8080，但其餘程式碼顯示您正在使用8000連接埠而不是8080連接埠。如果您將其更改為8000，您應該是正常的。