Risoluzione dei problemi CORS di React e Spring Boot: richiesta GET bloccata

Comprendere gli errori CORS nelle app Spring Boot e React

Quando si sviluppano applicazioni Web utilizzando Reagire per il frontend e Stivale primaverile per quanto riguarda il backend, un problema comune che gli sviluppatori devono affrontare è il famigerato errore CORS. Questo errore si verifica quando il browser blocca una richiesta per motivi di sicurezza, soprattutto quando si tenta di connettersi a un servizio backend ospitato su una porta o dominio diverso. In questo caso, hai a che fare con un problema CORS mentre crei un file Richiesta OTTIENI da React a un'API Spring Boot.

Il messaggio di errore solitamente indica che il browser sta bloccando la tua richiesta perché il file Accesso-Controllo-Consenti-Origine l'intestazione è mancante o configurata in modo errato. Vale la pena notare che strumenti come Postino non applicare queste restrizioni di sicurezza, motivo per cui la tua richiesta potrebbe funzionare perfettamente in Postman ma non riuscire nel browser.

Nel tuo scenario, il messaggio di errore indica che una richiesta di preflight non supera il controllo di accesso. Ciò accade in genere quando determinate intestazioni o metodi non sono consentiti o configurati correttamente nella policy CORS del server. Anche se la configurazione CORS sembra essere presente sul lato server, potrebbero esserci problemi specifici con il modo in cui gestisce le richieste del browser.

Questo articolo ti aiuterà a comprendere la causa principale del problema e ti guiderà attraverso le possibili soluzioni per risolverlo Errore CORS nell'applicazione React e Spring Boot.

Gestione degli errori CORS nelle applicazioni React e Spring Boot

Gli script forniti sopra mirano a risolvere il problema di Errori CORS in una configurazione del frontend React e del backend Spring Boot. L'errore si verifica quando il frontend, ospitato su "http://localhost:8081", tenta di effettuare una richiesta GET a un'API Spring Boot ospitata su "http://localhost:8080". I browser applicano rigide regole di sicurezza per impedire richieste multiorigine non autorizzate, motivo per cui esistono queste policy CORS. IL WebMvcConfigurer nella configurazione del backend Spring Boot aiuta a definire le regole CORS che consentono origini e metodi specifici, risolvendo in definitiva il problema.

Nel backend, il file "CorsConfig.java" definisce una classe di configurazione Spring Boot. IL @Fagiolo E @Ignora le annotazioni vengono utilizzate per inserire e personalizzare la configurazione CORS. Nel metodo "addCorsMappings()", la funzione "allowedOrigins()" consente esplicitamente le richieste da "http://localhost:8081", garantendo che il browser riconosca questa origine come fonte attendibile. L'inclusione di `allowedMethods()` garantisce che tutti i metodi HTTP, inclusi GET, POST e OPTIONS, siano consentiti. Questo è fondamentale perché i browser in genere inviano una richiesta OPTIONS preliminare per verificare se l'effettiva richiesta GET è consentita.

Sul frontend, React gestisce le richieste utilizzando Axios, un popolare client HTTP. Nella funzione "fetchData" del file "ProjectPage.tsx", la funzione "axios.get()" invia una richiesta GET al backend Spring Boot. L'opzione "withCredentials" è impostata su true, consentendo l'invio di cookie e credenziali di autenticazione con la richiesta. Inoltre, è inclusa l'intestazione Authorization per passare il token dell'utente, garantendo che la richiesta venga autenticata correttamente. Senza queste configurazioni il browser bloccherebbe la richiesta per motivi di sicurezza.

Infine, il file di test unitario, "CorsTest.java", verifica che la configurazione CORS funzioni come previsto. Questo test simula una richiesta HTTP OPTIONS all'API di backend, che imita una vera richiesta di preflight effettuata dal browser. Il test verifica che la risposta contenga le intestazioni corrette, come ad esempio Accesso-Controllo-Consenti-Origine, che consente richieste multiorigine dal frontend. Il metodo "MockMvcResultMatchers.header()" garantisce che il server risponda correttamente alle richieste di preflight. Includendo test unitari, gli sviluppatori possono garantire che la loro configurazione CORS sia affidabile e funzionale in vari ambienti.

// 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"));
   }
}

Esplorare CORS nel contesto della sicurezza e della progettazione delle API

Quando si ha a che fare con CORS (condivisione di risorse tra origini) nelle moderne applicazioni web, è fondamentale comprenderne le implicazioni in termini di sicurezza. CORS è implementato come misura di sicurezza dai browser per impedire ai siti Web dannosi di effettuare richieste API non autorizzate per conto degli utenti. Ciò è particolarmente importante negli scenari in cui vengono scambiati dati sensibili tra servizi frontend e backend, come token di autenticazione e credenziali utente. Quando si configura CORS in un backend Spring Boot, è essenziale consentire solo alle origini attendibili di accedere alle risorse protette, rendendo la configurazione della sicurezza un elemento chiave dell'architettura del sistema.

Un altro aspetto cruciale è la gestione delle richieste di preflight, che sono richieste automatiche effettuate dal browser prima dell'effettiva richiesta GET o POST. Ciò si verifica quando il client deve confermare se il server consente richieste multiorigine e supporta intestazioni o metodi specifici. In alcuni casi, configurazioni errate nella gestione di questi richieste di prevolo può causare problemi, con conseguenti errori CORS anche quando la richiesta effettiva funziona correttamente in strumenti come Postman. La configurazione di "CorsRegistry" di Spring Boot con le intestazioni e i metodi corretti garantisce che le richieste di preflight vengano elaborate correttamente, consentendo un'interazione fluida tra frontend e backend.

Inoltre, la gestione del CORS non dovrebbe essere statica o valida per tutti. In ambienti dinamici come quelli gestiti con microservizi, API diverse possono avere requisiti di sicurezza diversi. Alcune API potrebbero dover esporre solo determinati metodi, mentre altre potrebbero richiedere un controllo più rigoroso sulle origini. È qui che diventa importante ottimizzare la configurazione CORS per ciascun endpoint. Una corretta gestione CORS aiuta anche a ottimizzare le prestazioni dell'API riducendo le richieste di preflight non necessarie e garantendo un'interazione fluida con l'utente.