Problema Error de Cors al agregar HasApiTokens en Laravel

Ruiz86 dijo:

Buenas compañeros, ojala me puedan ayudar, me pasa algo raro en Laravel (me estoy iniciando por lo que seguro que algo se me pasa).

Tengo un back en Laravel 11 (api rest) y un front con React. Antes de exponer el error en concreto, os dejo una llamada que si me funciona.

Función en controller en Laravel para cambiar la contraseña:

PHP:

public function changePassword(Request $request)
    {
        // Valido los datos de entrada
        $validator = Validator::make($request->all(), [
            'token' => 'required|string',
            'password' => 'required|string',
        ]);
        // Existe un email con solicitud de reestablecimiento
        $requested = PasswordResetToken::where('token', $request->token)->first();
        if($requested){
            $user = User::where('email', $requested->email)->first();
            // Confirmo que el email existe y cambio la contraseña
            if ($user) {
                $user->password = Hash::make($request->password);
                $user->save();
                return response()->json(['success' => 'Solicitud correcta'], 200);
            }
            else{
                return response()->json(['error' => 'User not found'], 401);
            }
        }else{
            return response()->json(['error' => 'Error token requested'], 401);
        }
    }

Ahora viene el problema, tengo la siguiente funcion "login" dentro del mismo controlador:

PHP:

public function login(Request $request)
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            $token = auth()->user()->createToken('Token')->accessToken;
            return response()->json(['token' => $token], 200);
        } else {
            return response()->json(['error' => 'Credenciales incorrectas'], 401);
        }
    }

Y al llamarla me da este error: Call to undefined method App\\Models\\User::createToken()

Entonces me he ido al modelo y he agregado "HasApiTokens" tal y como he googleado...:

Insertar CODE, HTML o PHP:

use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens...

Y al hacer eso, la primera llamada "changePassword" me da error de Cors: "has been blocked by CORS policy: No 'Access-Control-Allow-Origin'".
Y la segunda llamada "login" ya no me da el error de createToken pero también me da error de Cors: "has been blocked by CORS policy: No 'Access-Control-Allow-Origin'".

¿Porque al agregar HasApiTokens al modelo User, me aparece error de Cors? ¿Qué hago mal o que me falta controlar?

Hacer clic para expandir...

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }
}

protected $middleware = [
    // otros middlewares
    \App\Http\Middleware\Cors::class,
];

Cicklow dijo:

Hola, parece que estás experimentando un problema común relacionado con CORS (Cross-Origin Resource Sharing) al agregar la funcionalidad de tokens API en Laravel.

Para solucionar el error de CORS, necesitas configurar tu backend de Laravel para permitir las solicitudes desde tu frontend de React. Puedes hacerlo configurando las cabeceras CORS en tu aplicación Laravel. Aquí te dejo un ejemplo de cómo puedes hacerlo:

En tu archivo App\Http\Middleware\Cors.php, puedes agregar las siguientes cabeceras:

PHP:

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }
}

Después de definir tu middleware CORS, asegúrate de registrarlo en el archivo App\Http\Kernel.php. Puedes hacerlo agregando tu middleware a la matriz $middleware:

PHP:

protected $middleware = [
    // otros middlewares
    \App\Http\Middleware\Cors::class,
];

Una vez que hayas configurado esto, tu backend Laravel debería permitir las solicitudes desde tu frontend React y el error de CORS debería resolverse.

En cuanto al error de createToken, al agregar HasApiTokens al modelo User, has integrado la funcionalidad de tokens de API proporcionada por Laravel Passport. Por lo tanto, ahora deberías poder generar tokens de acceso para autenticar las solicitudes de API, como en tu función login.

Fijate si te sirve, fue la respuesta de la IA del foro

Hacer clic para expandir...

• No tenía creada la carpeta ni el archivo: App\Http\Middleware\Cors.php, los he creado tal cual.
• Tampoco el archivo kernel en App\Http\Kernel.php, en este punto no conozco la estructura de este archivo ni si tengo que hacer algo para que laravel lo tenga en cuenta.

Ruiz86 dijo:

• No tenía creada la carpeta ni el archivo: App\Http\Middleware\Cors.php, los he creado tal cual.
• Tampoco el archivo kernel en App\Http\Kernel.php, en este punto no conozco la estructura de este archivo ni si tengo que hacer algo para que laravel lo tenga en cuenta.

¿Cómo resuelvo el segundo punto?

Hacer clic para expandir...

protected $middleware = [
    // Otros middlewares
    \App\Http\Middleware\Cors::class,
];

Ruiz86 dijo:

Por favor, si alguien puede ayudarme con una respuesta válida, se lo agradezco.

Hacer clic para expandir...

Ruiz86 dijo:

• No tenía creada la carpeta ni el archivo: App\Http\Middleware\Cors.php, los he creado tal cual.
• Tampoco el archivo kernel en App\Http\Kernel.php, en este punto no conozco la estructura de este archivo ni si tengo que hacer algo para que laravel lo tenga en cuenta.

¿Cómo resuelvo el segundo punto?

Hacer clic para expandir...