Riešenie problémov s React a Spring Boot CORS: Zablokovaná požiadavka GET

Pochopenie chýb CORS v aplikáciách Spring Boot a React

Pri vývoji webových aplikácií pomocou Reagovať pre frontend a Jarná čižma pre backend je častým problémom, s ktorým sa vývojári stretávajú, neslávne známa chyba CORS. Táto chyba sa vyskytuje, keď prehliadač zablokuje požiadavku z bezpečnostných dôvodov, najmä pri pokuse o pripojenie k backendovej službe hosťovanej na inom porte alebo doméne. V tomto prípade riešite problém CORS pri vytváraní a žiadosť GET z React na Spring Boot API.

Chybové hlásenie zvyčajne naznačuje, že prehliadač blokuje vašu požiadavku, pretože Access-Control-Allow-Origin hlavička buď chýba, alebo je nesprávne nakonfigurovaná. Stojí za zmienku, že nástroje ako Poštár nevynucujte si tieto bezpečnostné obmedzenia, a preto môže vaša požiadavka fungovať v Postman perfektne, no v prehliadači zlyhá.

Vo vašom scenári chybové hlásenie naznačuje, že požiadavka pred výstupom neprešla kontrolou riadenia prístupu. Zvyčajne sa to stane, keď určité hlavičky alebo metódy nie sú povolené alebo správne nakonfigurované v politike CORS servera. Aj keď sa zdá, že konfigurácia CORS je na strane servera, môžu sa vyskytnúť špecifické problémy s tým, ako spracováva požiadavky prehliadača.

Tento článok vám pomôže pochopiť hlavnú príčinu problému a prevedie vás možnými riešeniami na vyriešenie problému Chyba CORS vo vašej aplikácii React a Spring Boot.

Riešenie chýb CORS v aplikáciách React a Spring Boot

Vyššie poskytnuté skripty majú za cieľ vyriešiť problém Chyby CORS v nastavení frontendu React a backendu Spring Boot. Chyba nastane, keď sa frontend, hosťovaný na 'http://localhost:8081', pokúsi zadať požiadavku GET na Spring Boot API hosťované na 'http://localhost:8080'. Prehliadače presadzujú prísne bezpečnostné pravidlá, aby zabránili neoprávneným požiadavkám na krížový pôvod, a preto existujú tieto pravidlá CORS. The WebMvcConfigurer trieda v backendovej konfigurácii Spring Boot pomáha definovať pravidlá CORS, ktoré umožňujú špecifické zdroje a metódy, čím sa problém v konečnom dôsledku vyrieši.

V backende súbor `CorsConfig.java` definuje triedu konfigurácie Spring Boot. The @Bean a @Prepísať anotácie sa používajú na vloženie a prispôsobenie konfigurácie CORS. V metóde `addCorsMappings()` funkcia `allowedOrigins()` explicitne povoľuje požiadavky z 'http://localhost:8081', čím zaisťuje, že prehliadač rozpozná tento pôvod ako dôveryhodný zdroj. Zahrnutie `allowedMethods()` zabezpečuje, že všetky metódy HTTP vrátane GET, POST a OPTIONS sú povolené. Je to dôležité, pretože prehliadače zvyčajne odosielajú predbežnú požiadavku OPTIONS, aby skontrolovali, či je skutočná požiadavka GET povolená.

Na frontende React spracováva požiadavky pomocou Axios, populárny HTTP klient. Vo funkcii `fetchData` súboru `ProjectPage.tsx` funkcia `axios.get()` posiela požiadavku GET do backendu Spring Boot. Možnosť „withCredentials“ je nastavená na hodnotu true, čo umožňuje odosielať súbory cookie a overovacie poverenia spolu so žiadosťou. Okrem toho je zahrnutá hlavička Authorization na odovzdanie tokenu používateľa, čím sa zabezpečí správna autentifikácia požiadavky. Bez týchto konfigurácií by prehliadač z bezpečnostných dôvodov požiadavku zablokoval.

Nakoniec súbor testovania jednotky, `CorsTest.java`, potvrdzuje, že konfigurácia CORS funguje podľa očakávania. Tento test simuluje požiadavku HTTP OPTIONS na backend API, ktorá napodobňuje skutočnú požiadavku pred výstupom zadanú prehliadačom. Test kontroluje, či odpoveď obsahuje správne hlavičky, ako napr Access-Control-Allow-Origin, ktorý umožňuje cross-origin požiadavky z frontendu. Metóda `MockMvcResultMatchers.header()` zabezpečuje, že server správne reaguje na požiadavky pred výstupom. Zahrnutím testov jednotiek môžu vývojári zabezpečiť, aby ich konfigurácia CORS bola spoľahlivá a funkčná v rôznych prostrediach.

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

Skúmanie CORS v kontexte bezpečnosti a dizajnu API

Pri rokovaní s CORS (Cross-Origin Resource Sharing) v moderných webových aplikáciách je dôležité porozumieť bezpečnostným dôsledkom. CORS je implementovaný ako bezpečnostné opatrenie prehliadačmi, aby sa zabránilo škodlivým webovým stránkam v zadávaní neoprávnených žiadostí API v mene používateľov. Toto je obzvlášť dôležité v scenároch, kde dochádza k výmene citlivých údajov medzi frontend a backend službami, ako sú autentifikačné tokeny a používateľské poverenia. Pri nastavovaní CORS v backende Spring Boot je nevyhnutné povoliť prístup k chráneným zdrojom iba dôveryhodným zdrojom, vďaka čomu je konfigurácia zabezpečenia kľúčovým prvkom architektúry systému.

Ďalším dôležitým aspektom je spracovanie požiadaviek pred výstupom, čo sú automatické požiadavky prehliadača pred samotnou požiadavkou GET alebo POST. K tomu dochádza, keď klient potrebuje potvrdiť, či server povoľuje požiadavky krížového pôvodu a či podporuje špecifické hlavičky alebo metódy. V niektorých prípadoch dochádza k nesprávnej konfigurácii pri manipulácii s nimi predletové požiadavky môže spôsobiť problémy, čo vedie k chybám CORS, aj keď skutočná požiadavka funguje dobre v nástrojoch, ako je Postman. Konfigurácia `CorsRegistry` Spring Boot so správnymi hlavičkami a metódami zaisťuje správne spracovanie požiadaviek pred výstupom, čo umožňuje hladkú interakciu medzi frontendom a backendom.

Navyše, manipulácia s CORS by nemala byť statická alebo univerzálna. V dynamických prostrediach, ako sú tie, ktoré sú spravované pomocou mikroslužieb, môžu mať rôzne rozhrania API rôzne bezpečnostné požiadavky. Niektoré rozhrania API môžu potrebovať odhaliť iba určité metódy, zatiaľ čo iné môžu vyžadovať prísnejšiu kontrolu nad pôvodom. Tu je dôležité doladiť konfiguráciu CORS pre každý koncový bod. Správna správa CORS tiež pomáha pri optimalizácii výkonu API znížením zbytočných požiadaviek na kontrolu pred výstupom a zabezpečením hladkej interakcie používateľa.