2

Estoy desarrollando un nuevo proyecto, quiero utilizar Laravel 8 y angular 10. Lo primero que quiero realizar es la seguridad de la API, estoy siguiendo el siguente artículo como guía:

https://medium.com/@eloufirhatim/laravel-angular-authentication-bee4100e5e33

Estoy generando usuarios con el factory que viene por defecto:

public function definition()
    {
        return [
            'name' => $this->faker->name,
            'email' => $this->faker->unique()->safeEmail,
            'email_verified_at' => now(),
            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
            'remember_token' => Str::random(10),
        ];
    }

Cuando quiero hacer login (desde el frontend) utilizando cualquiera de los usuarios generados, el cliente me devuelve el siguente error:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/oauth/token' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

VM1702:1 POST http://127.0.0.1:8000/oauth/token net::ERR_FAILED

Metodo login de login.component.ts:

login(): void {
    this.loading = true;
    this.errors = false;
    this.authService
      .login(this.controls.email.value, this.controls.password.value)
      .subscribe(
        (res: any) => {
          // Store the access token in the localstorage
          localStorage.setItem('access_token', res.access_token);
          this.loading = false;
          // Navigate to home page
          this.router.navigate(['/']);
        },
        (err: any) => {
          // This error can be internal or invalid credentials
          // You need to customize this based on the error.status code
          this.loading = false;
          this.errors = true;
        }
      );
  }

Metodo login de auth.service.ts:

  login(e: string, p: string): any {
    return this.http.post(
      this.authUrl,
      {
        grant_type: 'password',
        client_id: '2',
        client_secret: 'Q27q3PVJTU4brWVNgOhK66dOyOaBfUmTsU8hxfEk',
        username: e,
        password: p,
        scope: '',
      },
      this.options
    );
  }

Como puedo hacer para solucionar este problema?

7
  • Me imagino que estás haciendo tu API en c#, pues en tu API tienes que dar esos permisos cors, arriba de tu HttpPost coloca esto: [EnableCors(origins: "", headers: "", methods: "*")] Commented el 2 oct. 2020 a las 22:18
  • No, todavia no tengo la API armada, y estoy utilizando laravel (php). Tecnicamente cuando se realice el login correctamente me tendria que redireccionar al Home. Commented el 2 oct. 2020 a las 22:53
  • El problema son tus URL, chrome no te va a dejar hacer esas peticiones, estás abriendo el login en una página, navegador, etc en uno diferente al de home Commented el 2 oct. 2020 a las 22:56
  • 1
    ¿Responde esto a tu pregunta? Laravel-- No 'Access-Control-Allow-Origin' header is present on the requested resource
    – user128299
    Commented el 3 oct. 2020 a las 2:34
  • 1
    No es problema de rutas, no es problema de protocolos, es simplemente la falta de la cabecera CORS apropiada en Laravel. Commented el 3 oct. 2020 a las 12:26

1 respuesta 1

2

PROBLEMA

Se obtiene el siguiente error:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/oauth/token' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

al intentar consumir una API desarrollada en Laravel desde una aplicación Web desarrollada en Angular, ambas en el mismo servidor.

SOLUCIÓN

La solución es sencilla, se debe incluir en Laravel (la API a ser consumida) la cabecera CORS adecuada. De esta forma una petición desde el mismo origen será permitida.

Una forma de hacerlo es creando una función Middleware para ejecutarla en cada petición a nuestra API en las rutas seleccionadas.

Por ejemplo, creamos una función middleware ejecutando el siguiente comando:

php artisan make:middleware Cors

Luego, vamos a la carpeta donde se almacenan las funciones middleware y editamos la clase recién creada. Usualmente esta carpeta es app/Http/Middleware.

Podemos añadir las siguientes lineas:

<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
class Cors
{
    public function handle(Request $request, Closure $next)
    {
        return next($request)
        // Establecemos la cabecera CORS para permitir el origen de solicitud desde localhost
        ->header('Access-Control-Allow-Origin', 'http://localhost');
    }
}

Si bien esta cabecera me asegura que se puede consumir la API desde localhost, puede que en producción desee consumir la misma desde cualquier origen, para ello la cabecera adecuada sería:

header('Access-Control-Allow-Origin', '*'); // cualquier origen

O simplemente puede darse el caso que siempre la aplicación de Angular estará en el mismo servidor que la aplicación Laravel, por lo cual podemos establecer el origen permitido al nombre de host de dicho servidor.

Una vez implementado nuestro middleware, debemos registrarlo. Para ello agregamos lo siguiente en el archivo app/Http/Kernel.php en el Array llamado $routeMiddleware:

protected $routeMiddleware = [
    //...
    'cors' => \App\Http\Middleware\Cors::class,
];

Lo único que faltaría ahora es agregar el middleware a las rutas que deseamos permitir estas peticiones. Para ello editamos el archivo app/Providers/RouteServiceProvider.php y modificamos lo siguiente en la función mapApiRoutes(), en la que agregaremos la función middleware recién creada:

protected function mapApiRoutes()
{
    Route::prefix('api')
        // ->middleware('api') esto lo reemplazamos por:
        ->middleware(['api', 'cors'])
        ->namespace($this->namespace)
        ->group(base_path('routes/api.php'));
}

De esta forma todas las peticiones a nuestra API también serán manejadas por el middleware Cors que hemos creado.

Espero que esto te ayude a resolver el problema.

1
  • Excelente aporte, es un gusto verte participar en esta tag
    – user128299
    Commented el 4 oct. 2020 a las 16:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.