Solucionando problemas de React y Spring Boot CORS: solicitud GET bloqueada

Comprensión de los errores de CORS en las aplicaciones Spring Boot y React

Al desarrollar aplicaciones web utilizando Reaccionar para la interfaz y Bota de primavera Para el backend, un problema común al que se enfrentan los desarrolladores es el infame error CORS. Este error ocurre cuando el navegador bloquea una solicitud por razones de seguridad, especialmente cuando se intenta conectarse a un servicio backend alojado en un puerto o dominio diferente. En este caso, está lidiando con un problema de CORS mientras realiza una OBTENER solicitud de React a una API Spring Boot.

El mensaje de error generalmente indica que el navegador está bloqueando su solicitud porque el Control-de-acceso-permitir-origen Falta el encabezado o está configurado incorrectamente. Vale la pena señalar que herramientas como Cartero no aplique estas restricciones de seguridad, razón por la cual su solicitud podría funcionar perfectamente en Postman pero fallar en el navegador.

En su escenario, el mensaje de error indica que una solicitud de verificación previa no pasa la verificación de control de acceso. Esto suele suceder cuando ciertos encabezados o métodos no están permitidos o configurados correctamente en la política CORS del servidor. Si bien la configuración de CORS parece estar implementada en el lado del servidor, puede haber problemas específicos con la forma en que maneja las solicitudes del navegador.

Este artículo le ayudará a comprender la causa raíz del problema y le guiará a través de posibles soluciones para resolver el problema. error CORS en su aplicación React y Spring Boot.

Manejo de errores CORS en aplicaciones React y Spring Boot

Los scripts proporcionados anteriormente tienen como objetivo resolver el problema de Errores CORS en una configuración de frontend de React y backend de Spring Boot. El error ocurre cuando la interfaz, alojada en 'http://localhost:8081', intenta realizar una solicitud GET a una API Spring Boot alojada en 'http://localhost:8080'. Los navegadores aplican estrictas reglas de seguridad para evitar solicitudes no autorizadas de orígenes cruzados, razón por la cual existen estas políticas CORS. El WebMvcConfigurador La clase en la configuración del backend de Spring Boot ayuda a definir reglas CORS que permiten orígenes y métodos específicos, lo que finalmente resuelve el problema.

En el backend, el archivo `CorsConfig.java` define una clase de configuración Spring Boot. El @Frijol y @Anular Las anotaciones se utilizan para inyectar y personalizar la configuración de CORS. En el método `addCorsMappings()`, la función `allowedOrigins()` permite explícitamente solicitudes desde 'http://localhost:8081', asegurando que el navegador reconozca este origen como una fuente confiable. La inclusión de `allowedMethods()` garantiza que todos los métodos HTTP, incluidos GET, POST y OPTIONS, estén permitidos. Esto es crucial porque los navegadores normalmente envían una solicitud de OPCIONES de verificación previa para verificar si la solicitud GET real está permitida.

En el frontend, React maneja solicitudes usando axios, un popular cliente HTTP. En la función `fetchData` del archivo `ProjectPage.tsx`, la función `axios.get()` envía una solicitud GET al backend Spring Boot. La opción `withCredentials` está configurada en verdadero, lo que permite enviar cookies y credenciales de autenticación con la solicitud. Además, se incluye el encabezado de Autorización para pasar el token del usuario, lo que garantiza que la solicitud se autentique correctamente. Sin estas configuraciones, el navegador bloquearía la solicitud por motivos de seguridad.

Por último, el archivo de prueba unitaria, `CorsTest.java`, valida que la configuración de CORS esté funcionando como se esperaba. Esta prueba simula una solicitud de OPCIONES HTTP a la API de backend, que imita una solicitud de verificación previa real realizada por el navegador. La prueba comprueba que la respuesta contenga los encabezados correctos, como Control-de-acceso-permitir-origen, que permite solicitudes de origen cruzado desde el frontend. El método `MockMvcResultMatchers.header()` garantiza que el servidor responda correctamente a las solicitudes de verificación previa. Al incluir pruebas unitarias, los desarrolladores pueden garantizar que su configuración CORS sea confiable y funcional en diversos entornos.

// CorsConfig.java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/")
              .allowedOrigins("http://localhost:8081")
              .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
              .allowedHeaders("*")
              .allowCredentials(true);
   }
}

// ProjectPage.tsx
const ProjectsPage = () => {
   const [projectsData, setProjectsData] = useState<ProjectsData[]>([]);
   const projectsUrl = 'http://localhost:8080/api/projects/admin/toinspection';
   useEffect(() => { fetchData(); }, []);
   const fetchData = async () => {
      const token = Cookies.get('token');
      try {
         const response = await axios.get<ProjectsData[]>(projectsUrl, {
            headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
            withCredentials: true
         });
         setProjectsData(response.data);
      } catch (error) {
         console.error("Error fetching projects:", error);
      }
   };
   return (
      <div>
         <AdminPageTemplate type="projects" children=<AdminModContent data={projectsData} />/>
      </div>
   );
};
export default ProjectsPage;

// CorsTest.java
@RunWith(SpringRunner.class)
@WebMvcTest
public class CorsTest {
   @Autowired
   private MockMvc mockMvc;
   @Test
   public void testCorsHeaders() throws Exception {
      mockMvc.perform(MockMvcRequestBuilders.options("/api/projects/admin/toinspection")
              .header(HttpHeaders.ORIGIN, "http://localhost:8081")
              .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
              .andExpect(MockMvcResultMatchers.status().isOk())
              .andExpect(MockMvcResultMatchers.header().exists("Access-Control-Allow-Origin"))
              .andExpect(MockMvcResultMatchers.header().string("Access-Control-Allow-Origin", "http://localhost:8081"));
   }
}

Explorando CORS en el contexto de la seguridad y el diseño de API

Al tratar con CORS (intercambio de recursos entre orígenes) En las aplicaciones web modernas, es fundamental comprender las implicaciones de seguridad que conllevan. Los navegadores implementan CORS como una medida de seguridad para evitar que sitios web maliciosos realicen solicitudes de API no autorizadas en nombre de los usuarios. Esto es especialmente importante en escenarios en los que se intercambian datos confidenciales entre servicios frontend y backend, como tokens de autenticación y credenciales de usuario. Al configurar CORS en un backend Spring Boot, es esencial permitir que solo los orígenes confiables accedan a los recursos protegidos, lo que hace que la configuración de seguridad sea un elemento clave de la arquitectura del sistema.

Otro aspecto crucial es el manejo de las solicitudes de verificación previa, que son solicitudes automáticas realizadas por el navegador antes de la solicitud GET o POST real. Esto ocurre cuando el cliente necesita confirmar si el servidor permite solicitudes de origen cruzado y admite encabezados o métodos específicos. En algunos casos, las configuraciones erróneas en el manejo de estos solicitudes de verificación previa puede causar problemas y provocar errores de CORS incluso cuando la solicitud real funciona bien en herramientas como Postman. Configurar `CorsRegistry` de Spring Boot con los encabezados y métodos correctos garantiza que las solicitudes de verificación previa se procesen correctamente, lo que permite una interacción fluida entre el frontend y el backend.

Además, el manejo de CORS no debe ser estático ni único para todos. En entornos dinámicos como los gestionados con microservicios, diferentes API pueden tener diferentes requisitos de seguridad. Es posible que algunas API solo necesiten exponer ciertos métodos, mientras que otras pueden requerir un control más estricto sobre los orígenes. Aquí es donde se vuelve importante ajustar la configuración de CORS para cada punto final. La gestión adecuada de CORS también ayuda a optimizar el rendimiento de la API al reducir las solicitudes de verificación previa innecesarias y garantizar una interacción fluida del usuario.