Nuxt .js 和 Laravel API - CSRF 令牌不匹配

Question

我正在尝试使用 nuxt.js 作为前端并使用 Laravel 作为 API 来制作登录页面。

但是当我从 sainttum-cookie 中获取 csrf 令牌后，由于“CSRF 令牌不匹配”，我无法使用它。 。而且我不知道该怎么办...

Laravel 信息：

APP_URL=http://localhost:8080
FRONTEND_URL=http://localhost:3000
SANCTUM_STATEFUL_DOMAINS=http://localhost:8000,localhost:3000,localhost:8000,http://localhost:3000

8080 是 LAravel 的端口，3000 是 nuxt。

这些是对 api 的调用，登录被延迟并返回有关 CSRF 的错误，我不知道为什么。

// calls from nuxt
async function validate() {

  await axios.get('http://localhost:8080/sanctum/csrf-cookie', {
    withCredentials: true
  });

  const token = useCookie('XSRF-TOKEN');

  await axios.post('http://localhost:8080/login', {
    'email': '[e-mail]',
    'password': '1234567890'
  }, {
    headers: {
      'X-XSRF-TOKEN': token.value as string
    }
  })
}

cors.php 配置

    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,

Answer 1

3天后...我需要做的就是为登录axios添加

withCredentials: true

...

太棒了！ <3