Oprava problémů s React a Spring Boot CORS: Blokovaný požadavek GET

Pochopení chyb CORS v aplikacích Spring Boot a React

Při vývoji webových aplikací pomocí Reagovat pro frontend a Jarní bota pro backend je častým problémem, kterému vývojáři čelí, nechvalně známá chyba CORS. K této chybě dochází, když prohlížeč zablokuje požadavek z bezpečnostních důvodů, zejména při pokusu o připojení k backendové službě hostované na jiném portu nebo doméně. V tomto případě řešíte problém CORS při vytváření a požadavek GET z React na Spring Boot API.

Chybová zpráva obvykle naznačuje, že prohlížeč blokuje váš požadavek, protože Access-Control-Allow-Origin záhlaví buď chybí, nebo je nesprávně nakonfigurováno. Stojí za zmínku, že nástroje jako Listonoš nevynucujte tato bezpečnostní omezení, což je důvod, proč váš požadavek může fungovat perfektně v Postman, ale selže v prohlížeči.

Ve vašem scénáři chybová zpráva označuje, že požadavek před výstupem neprošel kontrolou řízení přístupu. K tomu obvykle dochází, když některá záhlaví nebo metody nejsou povoleny nebo správně nakonfigurovány v zásadách CORS serveru. I když se zdá, že konfigurace CORS je na straně serveru na místě, mohou se vyskytnout specifické problémy s tím, jak zpracovává požadavky prohlížeče.

Tento článek vám pomůže pochopit hlavní příčinu problému a provede vás možnými řešeními, jak problém vyřešit Chyba CORS ve vaší aplikaci React a Spring Boot.

Řešení chyb CORS v aplikacích React a Spring Boot

Výše uvedené skripty mají za cíl vyřešit problém Chyby CORS v nastavení frontendu React a backendu Spring Boot. K chybě dochází, když se frontend, hostovaný na 'http://localhost:8081', pokusí provést požadavek GET na Spring Boot API hostované na 'http://localhost:8080'. Prohlížeče prosazují přísná bezpečnostní pravidla, aby zabránily neoprávněným žádostem o cross-origin, a proto existují tyto zásady CORS. The WebMvcConfigurer class v konfiguraci backendu Spring Boot pomáhá definovat pravidla CORS, která umožňují specifické zdroje a metody, což nakonec problém vyřeší.

V backendu definuje soubor `CorsConfig.java` konfigurační třídu Spring Boot. The @Fazole a @Přepsat anotace se používají k vložení a přizpůsobení konfigurace CORS. V metodě `addCorsMappings()` funkce `allowedOrigins()` explicitně povoluje požadavky z 'http://localhost:8081' a zajišťuje, že prohlížeč rozpozná tento původ jako důvěryhodný zdroj. Zahrnutí `allowedMethods()` zajišťuje, že jsou povoleny všechny metody HTTP, včetně GET, POST a OPTIONS. To je zásadní, protože prohlížeče obvykle odesílají požadavek OPTIONS před výstupem, aby zkontrolovaly, zda je skutečný požadavek GET povolen.

Na frontendu React zpracovává požadavky pomocí Axios, oblíbený HTTP klient. Ve funkci `fetchData` souboru `ProjectPage.tsx` odešle funkce `axios.get()` požadavek GET do backendu Spring Boot. Možnost `withCredentials` je nastavena na hodnotu true, což umožňuje odesílání souborů cookie a ověřovacích pověření s požadavkem. Kromě toho je zahrnuta hlavička Authorization, která předává token uživatele a zajišťuje, že je požadavek správně ověřen. Bez těchto konfigurací by prohlížeč požadavek z bezpečnostních důvodů zablokoval.

Nakonec soubor testu jednotky, `CorsTest.java`, ověřuje, že konfigurace CORS funguje podle očekávání. Tento test simuluje požadavek HTTP OPTIONS na backend API, který napodobuje skutečný požadavek před výstupem zadaný prohlížečem. Test kontroluje, zda odpověď obsahuje správné hlavičky, jako např Access-Control-Allow-Origin, který umožňuje cross-origin požadavky z frontendu. Metoda `MockMvcResultMatchers.header()` zajišťuje, že server správně odpovídá na požadavky před výstupem. Zahrnutím testů jednotek mohou vývojáři zajistit, aby jejich konfigurace CORS byla spolehlivá a funkční v různých prostředích.

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

Zkoumání CORS v kontextu bezpečnosti a návrhu API

Při jednání s CORS (Cross-Origin Resource Sharing) v moderních webových aplikacích je zásadní porozumět bezpečnostním důsledkům, které za tím stojí. CORS je implementován jako bezpečnostní opatření prohlížečů, aby se zabránilo škodlivým webům v zasílání neoprávněných požadavků API jménem uživatelů. To je důležité zejména ve scénářích, kde dochází k výměně citlivých dat mezi frontendovými a backendovými službami, jako jsou ověřovací tokeny a přihlašovací údaje uživatele. Při nastavování CORS v backendu Spring Boot je nezbytné povolit přístup k chráněným zdrojům pouze důvěryhodným zdrojům, takže konfigurace zabezpečení je klíčovým prvkem architektury systému.

Dalším zásadním aspektem je zpracování požadavků před výstupem, což jsou automatické požadavky provedené prohlížečem před skutečným požadavkem GET nebo POST. K tomu dochází, když klient potřebuje potvrdit, zda server povoluje požadavky na křížový původ a zda podporuje konkrétní hlavičky nebo metody. V některých případech dochází k chybné konfiguraci při manipulaci s nimi předletové požadavky může způsobit problémy vedoucí k chybám CORS, i když skutečný požadavek funguje v nástrojích, jako je Postman, dobře. Konfigurace `CorsRegistry` Spring Boot se správnými hlavičkami a metodami zajišťuje správné zpracování požadavků před výstupem, což umožňuje hladkou interakci mezi frontendem a backendem.

Navíc manipulace s CORS by neměla být statická nebo univerzální. V dynamických prostředích, jako jsou ta spravovaná pomocí mikroslužeb, mohou mít různá rozhraní API různé požadavky na zabezpečení. Některá rozhraní API mohou potřebovat pouze odhalit určité metody, zatímco jiná mohou vyžadovat přísnější kontrolu nad původy. Zde je důležité vyladit konfiguraci CORS pro každý koncový bod. Správná správa CORS také pomáhá s optimalizací výkonu API snížením zbytečných požadavků na kontrolu před výstupem a zajištěním hladké interakce s uživatelem.