Nuxt-Laravel-Sanctum CSRF 令牌不匹配 419 错误

Question

当 Laravel 托管在服务器上并且 Nuxt 位于 PC 上的本地主机上时，我遇到 Nuxt-Laravel-Sanctum CSRF 令牌不匹配 419 错误。我已在 api.repairtofix.com 上上传了用于获取 API 的 Laravel 项目。

我正在尝试从 Nuxt 的电脑中的

localhost

登录。单击登录按钮时出现以下错误。

{消息：“CSRF 令牌不匹配。”，异常： “Symfony\Component\HttpKernel\Exception\HttpException”，…}

登录方法

login() {
    this.$auth.loginWith('laravelSanctum', { 
        data: this.form 
    })
    .then(response => console.log(response))
    .catch(error => console.log(response))
}

.env

APP_URL=http://api.repairtofix.com
SESSION_DOMAIN=api.repairtofix.com
SANCTUM_STATEFUL_DOMAINS=.repairtofix.com,localhost:3000

内核.php

'api' => [
    EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 
    'api.repairtofix.com,localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1'
)),

cors.php

'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'signup', 'getUser'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

api.php

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

// register
Route::get('register', function(Request $request){
    $user = User::create([
        'name' => $request->name,
        'email' => $request->email,
        'password' => bcrypt($request->password)
    ]);

    return $user;
});

// login
Route::post('login', function(Request $request){
    $credentials = $request->only('email', 'password');
    if(!auth()->attempt($credentials)){
        throw ValidationException::withMessages([
            'email' => 'Invalid credentials'
        ]);
    }

    $request->session()->regenerate();
    return response()->json(null, 201);
});

// logout
Route::post('logout', function(Request $request){
    auth()->guard('web')->logout();
    $request->session()->invalidate();
    $request->session()->regenerateToken();
    return response()->json(null, 201);
});

nuxt.config.js

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/auth-next',
    '@nuxtjs/toast',
],

auth:{
    strategies: {
        'laravelSanctum': {
            provider: 'laravel/sanctum',
            url: 'http://api.repairtofix.com',
            endpoints: {
                login: {
                    url: '/api/login'
                },
                logout: {
                    url: '/api/logout'
                },
                user: {
                    url: '/api/user'
                },
            },
            user: {
                property: false
            }
        },
    },
    redirect: {
        login: "/login",
        logout: "/",
        home: "/"
    }
},

Answer 1

我猜您正在使用 sainttum 的 SPA 身份验证，您的服务器和客户端必须位于同一域中。客户端（localhost）和你的API位于不同的域中。

文档

In order to authenticate, your SPA and API must share the same top-level domain. However, they may be placed on different subdomains.

Answer 2

就我而言，Axios 凭证在 nuxt.config 文件中未设置为 true，并且文本区分大小写

  axios: {
    baseUrl: 'http://localhost:8000',
    credentials: true,
  },

Answer 3

可能有点晚了，但以后还会有。 1-检查 laravel 中的 api/config/sanctum 并确保 localhost:xxxx 和 127.0.0.1:xxxx 上的端口正确 2-on .env 文件对 SANCTUM_STATEFUL_DOMAINS=localhost:xxxx

进行协调

Answer 4

将以下语句添加到您的 .env 文件并清除缓存。

AIRLOCK_STATEFUL_DOMAINS=127.0.0.1

Answer 5

在 Nuxt-Laravel-Sanctum 设置中遇到 CSRF 令牌不匹配错误，特别是 419 错误可能具有挑战性，但这是与 Web 应用程序安全相关的常见问题。当请求中使用的 CSRF 令牌与 Laravel 后端期望的令牌不匹配时，就会发生此错误，通常是由于令牌过期或配置错误造成的。

一般你要先打电话。

await axios.get("http://127.0.0.1:8000/sanctum/csrf-cookie");

之前

await axios.get("http://127.0.0.1:8000/bah/bah/bal");

注意：基本url必须一致，不要使用“localhost”获取csrf-cookie，然后使用“127.0.0.1”调用您的api。

坚持一个。对我来说，我更喜欢 127.0.0.1

要获得此问题的彻底解释和解决方案，我建议观看这个详细的视频。它提供了对问题的深入了解，增强您对情况的理解。