Correcció de problemes de CORS de React i Spring Boot: sol·licitud GET bloquejada

Entendre els errors CORS a les aplicacions Spring Boot i React

Quan es desenvolupen aplicacions web utilitzant Reacciona per a la interfície i Bota de primavera per al backend, un problema comú als desenvolupadors és el famós error CORS. Aquest error es produeix quan el navegador bloqueja una sol·licitud per motius de seguretat, especialment quan s'intenta connectar-se a un servei de fons allotjat en un port o domini diferent. En aquest cas, esteu tractant un problema CORS mentre feu un GET sol·licitud de React a una API Spring Boot.

El missatge d'error sol indicar que el navegador està bloquejant la vostra sol·licitud perquè Accés-Control-Permetre-Origen falta la capçalera o està mal configurada. Val la pena assenyalar que les eines com Carter no apliqueu aquestes restriccions de seguretat, per això la vostra sol·licitud pot funcionar perfectament a Postman però fallar al navegador.

En el vostre escenari, el missatge d'error indica que una sol·licitud de control previ no passa la comprovació de control d'accés. Això sol passar quan determinades capçaleres o mètodes no estan permesos o configurats correctament a la política CORS del servidor. Tot i que la configuració de CORS sembla que està al seu lloc al costat del servidor, pot haver-hi problemes específics amb com gestiona les sol·licituds del navegador.

Aquest article us ajudarà a entendre la causa principal del problema i us guiarà a través de possibles solucions per resoldre'l Error CORS a la vostra aplicació React i Spring Boot.

Gestió d'errors CORS a les aplicacions React i Spring Boot

Els scripts proporcionats anteriorment tenen com a objectiu resoldre el problema de Errors CORS en una configuració de servidor de React i Spring Boot. L'error es produeix quan la interfície, allotjada a 'http://localhost:8081', intenta fer una sol·licitud GET a una API Spring Boot allotjada a 'http://localhost:8080'. Els navegadors apliquen regles de seguretat estrictes per evitar sol·licituds entre orígens no autoritzades, per això existeixen aquestes polítiques CORS. El WebMvcConfigurer classe a la configuració de fons de Spring Boot ajuda a definir regles CORS que permeten orígens i mètodes específics, resolent finalment el problema.

Al backend, el fitxer `CorsConfig.java` defineix una classe de configuració de Spring Boot. El @Bean i @Anul·lació les anotacions s'utilitzen per injectar i personalitzar la configuració CORS. En el mètode `addCorsMappings()`, la funció `allowedOrigins()` permet explícitament les sol·licituds de 'http://localhost:8081', assegurant-se que el navegador reconeix aquest origen com a font de confiança. La inclusió de `allowedMethods()` garanteix que tots els mètodes HTTP, inclosos GET, POST i OPTIONS, estiguin permesos. Això és crucial perquè els navegadors solen enviar una sol·licitud d'OPCIONS de control previ per comprovar si la sol·licitud GET real està permesa.

A la interfície, React gestiona les sol·licituds utilitzant Axios, un client HTTP popular. A la funció `fetchData` del fitxer `ProjectPage.tsx`, la funció `axios.get()` envia una sol·licitud GET al backend de Spring Boot. L'opció `withCredentials` està configurada com a true, permetent que les galetes i les credencials d'autenticació s'enviïn amb la sol·licitud. A més, s'inclou la capçalera Autorització per passar el testimoni de l'usuari, assegurant que la sol·licitud s'autentica correctament. Sense aquestes configuracions, el navegador bloquejaria la sol·licitud per motius de seguretat.

Finalment, el fitxer de prova d'unitat, `CorsTest.java`, valida que la configuració CORS funciona com s'esperava. Aquesta prova simula una sol·licitud HTTP OPTIONS a l'API de fons, que imita una sol·licitud de verificació prèvia real feta pel navegador. La prova comprova que la resposta conté les capçaleres correctes, com ara Accés-Control-Permetre-Origen, que permet sol·licituds d'origen creuat des de la interfície. El mètode `MockMvcResultMatchers.header()` garanteix que el servidor respon correctament a les sol·licituds de comprovació prèvia. En incloure proves unitàries, els desenvolupadors poden assegurar-se que la seva configuració CORS és fiable i funcional en diversos entorns.

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

Explorant CORS en el context de la seguretat i el disseny d'API

Quan es tracta CORS (Compartició de recursos entre orígens) a les aplicacions web modernes, és crucial entendre les implicacions de seguretat que hi ha darrere. CORS s'implementa com a mesura de seguretat pels navegadors per evitar que els llocs web maliciosos facin sol·licituds d'API no autoritzades en nom dels usuaris. Això és especialment important en escenaris en què s'intercanvien dades confidencials entre serveis d'interfície i backend, com ara testimonis d'autenticació i credencials d'usuari. Quan configureu CORS en un backend de Spring Boot, és essencial permetre que només els orígens de confiança accedeixin als recursos protegits, fent de la configuració de seguretat un element clau de l'arquitectura del sistema.

Un altre aspecte crucial és la gestió de les sol·licituds de comprovació prèvia, que són peticions automàtiques fetes pel navegador abans de la sol·licitud GET o POST real. Això passa quan el client necessita confirmar si el servidor permet sol·licituds d'origen creuat i admet capçaleres o mètodes específics. En alguns casos, configuracions incorrectes en la gestió d'aquests sol·licituds prèvies al vol pot causar problemes, donant lloc a errors CORS fins i tot quan la sol·licitud real funciona bé en eines com Postman. Configurar el "CorsRegistry" de Spring Boot amb les capçaleres i els mètodes adequats garanteix que les sol·licituds de comprovació prèvia es processin correctament, permetent una interacció fluida entre la interfície i el backend.

A més, el maneig de CORS no hauria de ser estàtic o de mida única. En entorns dinàmics com els gestionats amb microserveis, les diferents API poden tenir requisits de seguretat diferents. Algunes API només necessiten exposar determinats mètodes, mentre que altres poden requerir un control més estricte sobre els orígens. Aquí és on esdevé important ajustar la configuració CORS per a cada punt final. La gestió adequada de CORS també ajuda a optimitzar el rendiment de l'API reduint les sol·licituds de control previ innecessàries i garantint una interacció fluida de l'usuari.