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

【问题标题】：Nuxt-Laravel-Sanctum CSRF token mismatch 419 errorNuxt-Laravel-Sanctum CSRF 令牌不匹配 419 错误
【发布时间】：2021-08-18 09:34:25
【问题描述】：

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

我正在尝试从 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: "/"
    }
},

【问题讨论】：

在这种情况下，您需要使用基于令牌的身份验证。有状态域和“EnsureFrontendRequestsAreStateful”使用 Laravel 的基于会话 cookie 的身份验证，这仅在两个应用程序共享同一个顶级域时才有效。

标签： laravel nuxt.js laravel-sanctum

【解决方案1】：

我猜你正在使用 SPA 身份验证和 sanctum，你的服务器和客户端都必须在同一个域上。客户端（本地主机）和您的 api 位于不同的域中。

docs

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

【讨论】：

【解决方案2】：

在我的例子中，Axios 凭据在 nuxt.config 文件中没有设置为 true，文本也区分大小写


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

【讨论】：