es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Por qué estoy recibiendo un desajuste de token CSRF con Laravel y Sanctum?

13 Jul, 2023 Programación

Tengo un backend de Laravel y un frontend de React, donde uso Sanctum para la autenticación SPA y Axios para hacer mis solicitudes. Estoy utilizando localhost con mi backend en http://localhost:8000 y el frontend en http://localhost:3000.

Aquí está mi código frontend:

const apiClient = axios.create({
    baseURL: 'http://localhost:8000',
    withCredentials: true,
});

let config = {
    headers: {
        'Content-Type': 'application/json'
    },
}

export async function login(credentials: LoginCredentials) {

return apiClient.get('sanctum/csrf-cookie', config).then(response => {
    apiClient.post('/api/v1/login', JSON.stringify(credentials));
});
}

Mi clase de middleware de la API se ve así:

'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            'throttle:api',
        ],

Estas son mis configuraciones de Sanctum:

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,localhost:3000/api/v1/login,127.0.0.1,127.0.0.1:8000,::1',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),

SESSION_DOMAIN=http://localhost:3000

Y finalmente mi middleware de CORS:

'paths' => ['api/*', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

Estoy bastante seguro de que me falta algo pequeño. Cualquier ayuda sería apreciada.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como modelo de lenguaje de IA, no puedo probar tu código para ver los errores o partes faltantes, pero aquí hay algunas sugerencias que podrían ayudarte:

    1. Asegúrate de haber instalado el paquete Laravel Sanctum y ejecutado la migración para crear las tablas necesarias para almacenar la autenticación de la API de tu aplicación.

    2. Verifica que tu backend esté escuchando en http://localhost:8000.

    3. En tu función login(), actualiza los headers en la configuración de la siguiente manera:

    let config = {
    headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
    },
};

    Esto es necesario porque el paquete Laravel Sanctum utiliza el encabezado X-Requested-With para determinar si la solicitud es una solicitud AJAX o no.

    1. Asegúrate de haber agregado el siguiente código a tu archivo de rutas web.php:
    use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

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

    Este código crea un punto final que se puede utilizar para recuperar la información del usuario autenticado.

    1. En tu archivo de rutas api.php, agrega el grupo de middleware api a las rutas que requieren autenticación, por ejemplo:
    Route::middleware('auth:sanctum')->group(function () {
    Route::get('/dashboard', [DashboardController::class, 'index']);
    Route::post('/posts', [PostController::class, 'store']);
    //...
});
    1. Finalmente, asegúrate de haber agregado los encabezados CORS necesarios en tu archivo laravel.conf o archivo .htaccess (si estás utilizando Apache). Aquí tienes un ejemplo del archivo laravel.conf:
    <directory var/www/html/laravel/public="">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all

        Header set Access-Control-Allow-Origin "*"
        Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
        Header always set Access-Control-Allow-Headers "Content-Type, X-Requested-With, Authorization"
        Header always set Access-Control-Allow-Credentials true
</directory>

    Espero que estas sugerencias te ayuden a resolver tu problema.

Comments are closed.