Muy buenas.
Os pongo en contexto, estoy creando una aplicación cuyo stack usa: Angular.js (v10.0.4), SpringBoot (v2.3.2) y MongoDB. Como navegador estoy usando Firefox (v79.0), aunque también he probado en Opera y Edge. Realizo las ejecuciones en local.
El error que me está dando ocurre al realizar la solicitud POST para la autentificación de los usuarios (tanto desde la parte del REST API del frontend, como utilizando postwomen.io).
Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://localhost:8080/api/login/. (Razón: Solicitud CORS sin éxito).
Para realizar las solicitudes desde front a back uso un RESTful API, el cual cuenta con servicios en la parte front que son los que implementan las funciones que llaman al backend de la aplicación. En el back uso una estructura estándar, que usa un Modelo (obtenidos a partir de las colecciones de la BBDD), el cual se usa como objeto dentro de los Repositorios (clases que extienden la funcionalidad de CrudRepository
) y los Controladores (que implementan la lógica de las funciones solicitadas desde frontend).
El código correspondiente a la llamada en el front está en el servicio auth.service.ts
:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
const AUTH_API = 'http://localhost:8080/api/';
const httpOptions = {
headers: new HttpHeaders()
.set('content-type', 'application/json')
};
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http: HttpClient) { }
login(credentials): Observable<any> {
return this.http.post(AUTH_API + 'login/', {
username: credentials.username,
password: credentials.password
}, httpOptions);
}
register(user): Observable<any> {
return this.http.post(AUTH_API + 'register/', {
username: user.username,
name: user.name,
surname: user.surname,
courtesy_title: user.title,
phone: user.phone,
email: user.email,
password: user.password
}, httpOptions);
}
}
Este código es llamado desde el componente login-card.component.ts
, para recuperar los datos de un formulario y lanzar la solicitud POST al backend:
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../../services/auth.service';
@Component({
selector: 'signup-card',
templateUrl: './signup-card.component.html',
styleUrls: ['./signup-card.component.css']
})
export class SignupCardComponent implements OnInit {
form: any = { };
isSuccessful = false;
isSignUpFailed = false;
errorMessage = '';
constructor(private authService: AuthService) { }
ngOnInit(): void {
}
onSubmit(): void {
this.authService.register(this.form).subscribe(
data => {
console.log(data);
this.isSuccessful = true;
this.isSignUpFailed = false;
},
err => {
this.errorMessage = err.error.message;
this.isSignUpFailed = true;
}
)
}
}
Por otro lado, el receptor de la parte de backend, AuthController.java
contiene el código:
package com.rainforesteco.spring.data.mongodb.controllers;
import java.security.MessageDigest;
import java.util.Optional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.rainforesteco.spring.data.mongodb.models.User;
import com.rainforesteco.spring.data.mongodb.payload.requests.LoginRequest;
import com.rainforesteco.spring.data.mongodb.repositories.UserRepository;
/**
* REST API Controller for Authentication against eco database in MongoDB.
*
* @author pablo
* @creationDate 19/08/2020
*
*/
@CrossOrigin(
origins="http:localhost:8080",
methods={RequestMethod.GET,RequestMethod.POST}
)
@RestController
@RequestMapping("/api")
public class AuthController
{
@Autowired
UserRepository userRepository;
@CrossOrigin
@PostMapping("/login")
public ResponseEntity<User> loginUser(@RequestBody LoginRequest loginRequest) {
try {
Optional<User> userData = userRepository.findByUsername(loginRequest.getUser());
if (!userData.isPresent()) {
userData = userRepository.findByEmail(loginRequest.getUser());
if (!userData.isPresent()) {
return new ResponseEntity<>(null, HttpStatus.NOT_FOUND);
}
}
User _user = userData.get();
String password = getSha256(loginRequest.getPassword());
if(password != _user.getPassword()) {
return new ResponseEntity<>(null, HttpStatus.FORBIDDEN);
}
return new ResponseEntity<>(_user, HttpStatus.OK);
} catch (Exception e) {
return new ResponseEntity<>(null, HttpStatus.INTERNAL_SERVER_ERROR);
}
}
private String getSha256(String message) {
try {
MessageDigest digest = MessageDigest.getInstance("SHA-256");
byte[] hash = digest.digest(message.getBytes("UTF-8"));
String shaKey = String.format("%064x", hash);
return shaKey;
} catch (Exception e) {
return null;
}
}
}
Con su respectivo UserRepository.java
y User.java
como repositorio y modelo respectivamente. La clase LoginRequest.java
simplemente contiene campos necesarios para el login: {user, password}
.
Además, cuento con una clase de configuración para CORS:
package com.rainforesteco.spring.data.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Profile;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@EnableWebMvc
@Profile("production")
public class CorsConfig implements WebMvcConfigurer
{
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*")
.allowCredentials(false)
;
}
}
He seguido varios tutoriales y guías, pero en ninguno veo qué es lo que falla.
Si necesitáis algo más para poder ayudarme con el error, no dudéis en hacérmelo saber.
Access-Control-Allow-Origin': 'direccion aqui'
en las cabeceras http de la petición??https://postwoman.io
.allowedOrigins("*")