Vue + Laravel Sanctum에서 CSRF 토큰 불일치로 인해 419 오류가 발생했습니다.

Question

"CSRF 토큰 불일치"라는 오류 메시지와 함께 "419(알 수 없는 상태)" 오류를 받았습니다.

POST http://127.0.0.1:8000/login 419(상태 알 수 없음)

CSRF 토큰이 일치하지 않습니다.

Laravel服务器：http://127.0.0.1:8000

Vue服务器：http://localhost:8080

웹사이트/Http/Kernel.php

<code>'api' => [
    LaravelSactumHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
    '스로틀:API',
    IlluminateRoutingMiddlewareSubstituteBindings::class,
],

<p>이용자/模型/User.php</p>
<pre class="lang-php Prettyprint-override"><code><?php

네임스페이스 AppModel;

IlluminateDatabaseEloquentFactoriesHasFactory를 사용하세요.
IlluminateNotificationsNotified를 사용하세요.
LaravelSactumHasApiTokens를 사용하세요.

클래스 사용자는 인증 가능을 확장합니다.
{
    HasApiTokens, HasFactory, Notified를 사용합니다.
    //...
}


<p>配置/cors.php</p>
<pre class="lang-php Prettyprint-override"><code><?php

반품 [
    '경로' => [
        'API/*',
        '성소/csrf-쿠키',
        '등록하다',
        '로그인',
    ],
    'allowed_methods' => ['*'],
    '허용_원산지' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    '최대 연령' => 0,
    'supports_credentials' => 진실,
];


<p>.env</p>
<pre class="brush:php;toolbar:false;">SESSION_DRIVER=쿠키
SESSION_DOMAIN=로컬호스트
SANCTUM_STATEFUL_DOMAINS=localhost:8080

src/main.js

<code>axios.interceptors.request.use((config) => {
    config.baseURL = 'http://127.0.0.1:8000'
    config.withCredentials = true

    구성 반환
})

<p>src/views/auth/Login.vue</p>
<pre class="lang-js Prettyprint-override"><code>'axios'에서 axios 가져오기
'@vue/reactivity'에서 { 반응형 }을 가져옵니다.

기본값 내보내기 {
    설정() {

        const 자격 증명 = 반응형({
            이메일: '',
            비밀번호: '',
        })

        const 로그인 = 비동기() => {
            axios.get('/sanctum/csrf-cookie').then( async () => {
                응답하자 = axios.post('/login', credential)을 기다립니다.
                console.log(응답);
            });
        }

        { 로그인, 자격 ​​증명 } 반환
    }
};
</code>

Answer 1

이 문제로 인해 문제가 발생했습니다. 몇번의 검색 끝에 이 페이지를 발견했습니다. 가능한 제안 솔루션을 본 후 수정했습니다

으아악

for

으아악

그럼 괜찮을 것 같아요! 잘 작동해요! !

Answer 2

그렇게 SANCTUM_STATEFUL_DOMAINS设置为localhost:8080 하지만 나머지 코드에서는 포트 8080 대신 포트 8000을 사용하고 있음을 보여줍니다. 8000으로 바꾸면 괜찮을 것 같습니다.