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 6

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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.

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>

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

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();