Løsning av React og Spring Boot CORS-problemer: Blokkert GET-forespørsel

Forstå CORS-feil i Spring Boot og React-apper

Ved utvikling av webapplikasjoner ved hjelp av Reagere for frontend og Fjærstøvel for backend er et vanlig problem utviklere står overfor den beryktede CORS-feilen. Denne feilen oppstår når nettleseren blokkerer en forespørsel på grunn av sikkerhetsårsaker, spesielt når du prøver å koble til en backend-tjeneste som er vert på en annen port eller domene. I dette tilfellet har du å gjøre med et CORS-problem mens du lager en FÅ forespørsel fra React til en Spring Boot API.

Feilmeldingen indikerer vanligvis at nettleseren blokkerer forespørselen din fordi Access-Control-Allow-Origin header mangler eller er feil konfigurert. Det er verdt å merke seg at verktøy som Postbud ikke håndhev disse sikkerhetsrestriksjonene, og det er grunnen til at forespørselen din kanskje fungerer perfekt i Postman, men mislykkes i nettleseren.

I scenarioet ditt indikerer feilmeldingen at en forhåndskontrollforespørsel ikke består tilgangskontrollkontrollen. Dette skjer vanligvis når visse overskrifter eller metoder ikke er tillatt eller riktig konfigurert i serverens CORS-policy. Mens CORS-konfigurasjon ser ut til å være på plass på serversiden, kan det være spesifikke problemer med hvordan den håndterer nettleserforespørsler.

Denne artikkelen vil hjelpe deg med å forstå årsaken til problemet og veilede deg gjennom mulige løsninger for å løse problemet CORS feil i React and Spring Boot-applikasjonen.

Håndtering av CORS-feil i React- og Spring Boot-applikasjoner

Skriptene ovenfor tar sikte på å løse problemet med CORS feil i et React-frontend og Spring Boot-backend-oppsett. Feilen oppstår når grensesnittet, vert på 'http://localhost:8081', forsøker å sende en GET-forespørsel til en Spring Boot API som er vert på 'http://localhost:8080'. Nettlesere håndhever strenge sikkerhetsregler for å forhindre uautoriserte forespørsler på tvers av opprinnelse, og det er derfor disse CORS-retningslinjene eksisterer. De WebMvcConfigurer klasse i Spring Boot-backend-konfigurasjonen hjelper med å definere CORS-regler som tillater spesifikke opprinnelser og metoder, og til slutt løser problemet.

I bakenden definerer `CorsConfig.java`-filen en Spring Boot-konfigurasjonsklasse. De @Bønne og @Overstyr merknader brukes til å injisere og tilpasse CORS-konfigurasjonen. I `addCorsMappings()`-metoden tillater `allowedOrigins()`-funksjonen eksplisitt forespørsler fra 'http://localhost:8081', og sikrer at nettleseren gjenkjenner denne opprinnelsen som en pålitelig kilde. Inkluderingen av `allowedMethods()` sikrer at alle HTTP-metoder, inkludert GET, POST og OPTIONS, er tillatt. Dette er avgjørende fordi nettlesere vanligvis sender en preflight OPTIONS-forespørsel for å sjekke om den faktiske GET-forespørselen er tillatt.

På frontend håndterer React forespørsler ved hjelp av Axios, en populær HTTP-klient. I `fetchData`-funksjonen til `ProjectPage.tsx`-filen, sender `axios.get()`-funksjonen en GET-forespørsel til Spring Boot-backend. Alternativet "withCredentials" er satt til true, slik at informasjonskapsler og autentiseringslegitimasjon kan sendes med forespørselen. I tillegg er autorisasjonsoverskriften inkludert for å sende brukerens token, for å sikre at forespørselen er autentisert på riktig måte. Uten disse konfigurasjonene ville nettleseren blokkert forespørselen på grunn av sikkerhetsårsaker.

Til slutt validerer enhetstestfilen, `CorsTest.java`, at CORS-konfigurasjonen fungerer som forventet. Denne testen simulerer en HTTP OPTIONS-forespørsel til backend-API-en, som etterligner en reell forhåndsforespørsel fra nettleseren. Testen sjekker at svaret inneholder riktige overskrifter, som f.eks Access-Control-Allow-Origin, som tillater kryssopprinnelsesforespørsler fra grensesnittet. `MockMvcResultMatchers.header()`-metoden sikrer at serveren svarer riktig på forhåndskontrollforespørsler. Ved å inkludere enhetstester kan utviklere sikre at deres CORS-konfigurasjon er pålitelig og funksjonell i ulike 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"));
   }
}

Utforsking av CORS i sammenheng med sikkerhet og API-design

Når man har å gjøre med CORS (Cross-Origin Resource Sharing) i moderne nettapplikasjoner er det avgjørende å forstå sikkerhetsimplikasjonene bak det. CORS er implementert som et sikkerhetstiltak av nettlesere for å forhindre at ondsinnede nettsteder kommer med uautoriserte API-forespørsler på vegne av brukere. Dette er spesielt viktig i scenarier der sensitive data utveksles mellom frontend- og backend-tjenester, som autentiseringstokener og brukerlegitimasjon. Når du setter opp CORS i en Spring Boot-backend, er det viktig å la bare pålitelige opphaver få tilgang til beskyttede ressurser, noe som gjør sikkerhetskonfigurasjonen til et sentralt element i systemets arkitektur.

Et annet viktig aspekt er håndtering av forhåndskontrollforespørsler, som er automatiske forespørsler fra nettleseren før selve GET- eller POST-forespørselen. Dette skjer når klienten må bekrefte om serveren tillater kryssopprinnelsesforespørsler og støtter spesifikke overskrifter eller metoder. I noen tilfeller feilkonfigurasjoner i håndteringen av disse forhåndsflygingsforespørsler kan forårsake problemer, noe som resulterer i CORS-feil selv når den faktiske forespørselen fungerer fint i verktøy som Postman. Konfigurering av Spring Boots 'CorsRegistry' med de riktige overskriftene og metodene sikrer at forhåndskontrollforespørsler behandles riktig, noe som tillater jevn interaksjon mellom frontend og backend.

Dessuten skal CORS-håndtering ikke være statisk eller ensartet. I dynamiske miljøer som de som administreres med mikrotjenester, kan forskjellige APIer ha forskjellige sikkerhetskrav. Noen API-er trenger kanskje bare å avsløre visse metoder, mens andre kan kreve strengere kontroll over opprinnelsen. Det er her finjustering av CORS-konfigurasjonen for hvert endepunkt blir viktig. Riktig CORS-administrasjon hjelper også med å optimalisere API-ytelsen ved å redusere unødvendige forhåndskontrollforespørsler og sikre jevn brukerinteraksjon.