Løsning af React og Spring Boot CORS-problemer: Blokeret GET-anmodning

Forstå CORS-fejl i Spring Boot- og React-apps

Ved udvikling af webapplikationer vha Reagere til frontend og Fjederstøvle for backend er et almindeligt problem, udviklere står over for, den berygtede CORS-fejl. Denne fejl opstår, når browseren blokerer en anmodning på grund af sikkerhedsmæssige årsager, især når du forsøger at oprette forbindelse til en backend-tjeneste, der er hostet på en anden port eller et andet domæne. I dette tilfælde har du at gøre med et CORS-problem, mens du laver en FÅ anmodning fra React til en Spring Boot API.

Fejlmeddelelsen angiver normalt, at browseren blokerer din anmodning, fordi Access-Control-Allow-Origin header mangler eller er forkert konfigureret. Det er værd at bemærke, at værktøjer som Postbud håndhæv ikke disse sikkerhedsbegrænsninger, hvorfor din anmodning muligvis fungerer perfekt i Postman, men mislykkes i browseren.

I dit scenarie angiver fejlmeddelelsen, at en forhåndsanmodning ikke består adgangskontrolkontrollen. Dette sker typisk, når visse overskrifter eller metoder ikke er tilladt eller korrekt konfigureret i serverens CORS-politik. Selvom CORS-konfiguration ser ud til at være på plads på serversiden, kan der være specifikke problemer med, hvordan den håndterer browseranmodninger.

Denne artikel vil hjælpe dig med at forstå årsagen til problemet og guide dig gennem mulige løsninger til at løse problemet CORS fejl i din React and Spring Boot-applikation.

Håndtering af CORS-fejl i React- og Spring Boot-applikationer

Ovenstående scripts har til formål at løse problemet med CORS fejl i en React frontend og Spring Boot backend opsætning. Fejlen opstår, når frontend, hostet på 'http://localhost:8081', forsøger at lave en GET-anmodning til en Spring Boot API hostet på 'http://localhost:8080'. Browsere håndhæver strenge sikkerhedsregler for at forhindre uautoriserede anmodninger om krydsoprindelse, hvilket er grunden til, at disse CORS-politikker eksisterer. De WebMvcConfigurer klasse i Spring Boot-backend-konfigurationen hjælper med at definere CORS-regler, der tillader specifikke oprindelser og metoder, hvilket i sidste ende løser problemet.

I backend definerer filen `CorsConfig.java` en Spring Boot-konfigurationsklasse. De @Bønne og @Tilsidesæt annoteringer bruges til at injicere og tilpasse CORS-konfigurationen. I `addCorsMappings()`-metoden tillader funktionen `allowedOrigins()` eksplicit anmodninger fra 'http://localhost:8081', hvilket sikrer, at browseren genkender denne oprindelse som en pålidelig kilde. Inkluderingen af ​​`allowedMethods()` sikrer, at alle HTTP-metoder, inklusive GET, POST og OPTIONS, er tilladt. Dette er afgørende, fordi browsere typisk sender en anmodning om præflight OPTIONS for at kontrollere, om den faktiske GET-anmodning er tilladt.

På frontend håndterer React anmodninger vha Axios, en populær HTTP-klient. I `fetchData`-funktionen i filen `ProjectPage.tsx` sender `axios.get()`-funktionen en GET-anmodning til Spring Boot-backend. Indstillingen 'withCredentials' er sat til true, hvilket tillader, at cookies og autentificeringslegitimationsoplysninger sendes med anmodningen. Derudover er autorisationsoverskriften inkluderet for at videregive brugerens token, hvilket sikrer, at anmodningen er autentificeret korrekt. Uden disse konfigurationer ville browseren blokere anmodningen af ​​sikkerhedsmæssige årsager.

Til sidst validerer enhedstestfilen, `CorsTest.java`, at CORS-konfigurationen fungerer som forventet. Denne test simulerer en HTTP OPTIONS-anmodning til backend-API'en, som efterligner en reel forhåndsanmodning lavet af browseren. Testen kontrollerer, at svaret indeholder de korrekte overskrifter, som f.eks Access-Control-Allow-Origin, som tillader krydsoprindelsesanmodninger fra frontend. Metoden `MockMvcResultMatchers.header()` sikrer, at serveren reagerer korrekt på forhåndskontrolanmodninger. Ved at inkludere enhedstests kan udviklere sikre, at deres CORS-konfiguration er pålidelig og funktionel i forskellige miljøer.

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

Udforskning af CORS i sammenhæng med sikkerhed og API-design

Når man beskæftiger sig med CORS (Cross-Origin Resource Sharing) i moderne webapplikationer er det afgørende at forstå sikkerhedsimplikationerne bag det. CORS er implementeret som en sikkerhedsforanstaltning af browsere for at forhindre ondsindede websteder i at fremsætte uautoriserede API-anmodninger på vegne af brugere. Dette er især vigtigt i scenarier, hvor følsomme data udveksles mellem frontend- og backend-tjenester, såsom autentificeringstokens og brugerlegitimationsoplysninger. Når du opsætter CORS i en Spring Boot-backend, er det vigtigt kun at tillade betroede oprindelser at få adgang til beskyttede ressourcer, hvilket gør sikkerhedskonfigurationen til et nøgleelement i systemets arkitektur.

Et andet afgørende aspekt er håndtering af preflight-anmodninger, som er automatiske anmodninger fra browseren før den faktiske GET- eller POST-anmodning. Dette sker, når klienten skal bekræfte, om serveren tillader krydsoprindelsesanmodninger og understøtter specifikke overskrifter eller metoder. I nogle tilfælde fejlkonfigurationer i håndteringen af ​​disse forhåndsanmodninger kan forårsage problemer, hvilket resulterer i CORS-fejl, selv når den faktiske anmodning fungerer fint i værktøjer som Postman. Konfiguration af Spring Boots 'CorsRegistry' med de rigtige overskrifter og metoder sikrer, at preflight-anmodninger behandles korrekt, hvilket muliggør jævn interaktion mellem frontend og backend.

Desuden bør CORS-håndtering ikke være statisk eller one-size-fits-all. I dynamiske miljøer som dem, der administreres med mikrotjenester, kan forskellige API'er have forskellige sikkerhedskrav. Nogle API'er behøver muligvis kun at afsløre visse metoder, mens andre kan kræve strengere kontrol over oprindelsen. Det er her, finjustering af CORS-konfigurationen for hvert endepunkt bliver vigtig. Korrekt CORS-styring hjælper også med at optimere API-ydeevnen ved at reducere unødvendige preflight-anmodninger og sikre smidig brugerinteraktion.