0

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.

5
  • Probaste a añadir Access-Control-Allow-Origin': 'direccion aqui' en las cabeceras http de la petición??
    – Benito-B
    Commented el 19 ago. 2020 a las 21:39
  • Como cultura general, esta respuesta tiene una buena explicación de CORS. ¿Intentaste con las opciones de configuración de la documentación oficial? Commented el 19 ago. 2020 a las 22:26
  • @PabloGutiérrez, sí, tengo la configuración recomendada en la documentación oficial con algo más de código, pero sigue sin permitirme realizar la solicitud. También he comprobado que puedo realizar una solicitud GET desde el buscador (me devuelve datos), pero usando postwoman me retorna el mismo error. Commented el 20 ago. 2020 a las 15:39
  • Cada origen diferente tiene que ser configurado en la lista de origenes permitidos en SpringBoot. ¿Agregaste el origen de postwoman? https://postwoman.io. Commented el 20 ago. 2020 a las 15:53
  • @PabloGutiérrez, debería estar ya agregado: acepta todos los orígenes: allowedOrigins("*") Commented el 20 ago. 2020 a las 16:31

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.