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?