No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Crear configuraci贸n de CORS

8/23
Recursos

Aportes 13

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Muy importante el CORS en Proyectos reales.
Si toca implementar Back, aseg煤rense de utilizarlos, a veces quien hace los servicios consume o hace pruebas desde Postman o otro programa en Java, ahi no les marcara error de CORS como una aplicaci贸n front desde el navegador web, y pueden tener la errorea idea de que est谩n bien y perdiendo tiempo con el otro equipo verificando donde esta el problema.

Errores de CORS --> 100% Back.

Por si alg煤n compa帽ero tiene problemas al aplicar la configuraci贸n de cors en la clase SecurityConfig, ya que intellij dice que esta deprecado. Pueden utilizar el siguiente c贸digo:

@Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.authorizeHttpRequests(customizeRequests -> {
                    customizeRequests.anyRequest().authenticated();
                }).csrf(AbstractHttpConfigurer::disable).cors(Customizer.withDefaults())
                .httpBasic(Customizer.withDefaults());
        return http.build();
    }

Si no quieren descargar y ejecutar el Front de Angular pueden levantar una p谩gina desde VSCode con la extensi贸n de LiveServer, despu茅s solo desde la consola o en un archivo JS deben hacer la petici贸n usando fetch, xhr o jQuery.
Solo cambien lo que est谩 entre <>

fetch("<AQUI VA EL LOCALHOST>/api/pizzas/available", {
  "headers": {
    "Authorization": "Basic <AQUI PASSWD>"
  }})
    .then(response => response.text())
    .then(result => console.log(result));

La respuesta aparecer谩 en la consola o tambi茅n pueden verificarla desde el apartado de Red del navegador.

CORS
=Cross-Origin Resource Sharing
=Uso compartido de recursos entre or铆genes

Aqui les dejo el html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizza</title>
</head>
<body>
  <code id="pizzas">

  </code>
    <script>
      const pizzaContent=document.getElementById("pizzas")
const url=""
const auth="Basic dXNlcjozM2EzNGM4Ny0yMzZmLTQ1YzUtYWU4NC1mZGY3MmJhZWY3NzY="
fetch(url, {
  "headers": {
    "Authorization": auth
  }})
    .then(response => response.json())
    .then(result => {
      console.log(result)
      pizzaContent.textContent = JSON.stringify(result);
    });
    </script>
</body>
</html>
```js @Configuration public class SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .csrf(AbstractHttpConfigurer::disable) .cors(Customizer.withDefaults()) .authorizeHttpRequests(customizeRequests -> { customizeRequests .anyRequest() .authenticated(); }) .httpBasic(Customizer.withDefaults()); return http.build(); } } ```

Hola compa帽eros, tengo unas ganas de hacer una implemetaci贸n de front end al proyecto asi que les traigo un HTML (index.html) y Js (main.js) para los que tambien tienen ganas de hacer eso y ir probando el proyecto puedan hacerlo 鉂わ笍

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizza</title>
</head>
<body>
    <div id="pizzas"></div>  
    <script src="main.js"></script>
</body>
</html>

JavaScript (main.js)

const urlAPI = "";
const APIKey = "XXXXXXXXXXXXXXXXXXXX";

async function pizzasGET () {
    const response = await fetch(urlAPI,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': APIKey,
            },
        });
    const datos = await response.json();

    console.log(datos);
    const pizzaContent = document.getElementById("pizzas");
    pizzaContent.textContent = JSON.stringify(datos);
}

pizzasGET();

normalmente yo solo aqui aplicada lo de los CORS XD:

@CrossOrigin(origins = { 鈥*鈥 })
@RestController
@RequestMapping("/api")
public class ClientRestController {

ahora ya se que lo puedo hacer mas profesional jajaj xd

estoy usando java 17 y spring 3.2.5 y spring security 6.2.4 logre que me funcionara asi @Bean *public SecurityFilterChain* filterChain(HttpSecurity http) *throws* Exception{ http.cors(cors -> cors.configurationSource(corsConfigurationSource())).authorizeHttpRequests(authorize -> authorize .anyRequest().authenticated()).csrf((csrf) -> csrf.ignoringRequestMatchers("/api/\*")).httpBasic(*withDefaults*()); *return* http.build(); } @Bean *public CorsConfigurationSource* corsConfigurationSource() { CorsConfiguration config = *new* CorsConfiguration().applyPermitDefaultValues(); config.setAllowedMethods(Arrays.*asList*("GET", "POST", "PUT", "DELETE", "PATCH")); config.setAllowCredentials(*false*); config.setAllowedHeaders(Arrays.*asList*("Authorization", "Cache-Control", "Content-Type", "X-Frame-Options")); UrlBasedCorsConfigurationSource source = *new* UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/\*\*", config); *return* source; }
```java @Bean public CorsConfigurationSource corsConfigurationSource() { CorsConfiguration config = new CorsConfiguration().applyPermitDefaultValues(); config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "PATCH")); config.setAllowCredentials(false); config.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type", "X-Frame-Options")); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/\*\*", config); return source; } ```
CORS Cross-Origin Resource Sharing: Es un mecanismo para integrar aplicaciones. Define una forma para que las aplicaciones web cliente que se cargan en un dominio interact煤en con recursos en un dominio diferente.
@Configuration public class SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .csrf(AbstractHttpConfigurer::disable) .cors(Customizer.*withDefaults*()) .authorizeHttpRequests(customizeRequests -> { customizeRequests .anyRequest() .authenticated(); }) .httpBasic(Customizer.*withDefaults*()); return http.build(); } }
@CrossOrigin en el controlador se usa en algun proyecto real, es viable para la arquitectura del sistema ?