Odpravljanje težav z React in Spring Boot CORS: Blokirana zahteva GET

Razumevanje napak CORS v aplikacijah Spring Boot in React

Pri razvoju spletnih aplikacij z uporabo Reagiraj za sprednji del in Pomladni škorenj za zaledje je pogosta težava, s katero se srečujejo razvijalci, zloglasna napaka CORS. Do te napake pride, ko brskalnik zaradi varnostnih razlogov blokira zahtevo, zlasti ko se poskuša povezati z zaledno storitvijo, ki gostuje na drugih vratih ali domeni. V tem primeru imate opravka s težavo CORS, medtem ko ustvarjate a GET zahteva od React do Spring Boot API.

Sporočilo o napaki običajno pomeni, da brskalnik blokira vašo zahtevo, ker Access-Control-Allow-Origin glava manjka ali je nepravilno konfigurirana. Omeniti velja, da orodja, kot so Poštar ne uveljavljajte teh varnostnih omejitev, zaradi česar lahko vaša zahteva deluje popolnoma v Postmanu, vendar ne uspe v brskalniku.

V vašem scenariju sporočilo o napaki nakazuje, da zahteva pred tiskom ne prestane preverjanja nadzora dostopa. To se običajno zgodi, ko določene glave ali metode niso dovoljene ali pravilno konfigurirane v pravilniku CORS strežnika. Čeprav se zdi, da je konfiguracija CORS vzpostavljena na strani strežnika, lahko pride do posebnih težav pri tem, kako obravnava zahteve brskalnika.

Ta članek vam bo pomagal razumeti temeljni vzrok težave in vas vodil skozi možne rešitve za njeno rešitev Napaka CORS v vaši aplikaciji React in Spring Boot.

Obravnava napak CORS v aplikacijah React in Spring Boot

Namen zgornjih skriptov je rešiti problem Napake CORS v nastavitvah zalednega dela React in Spring Boot. Napaka se pojavi, ko sprednji del, ki gostuje na 'http://localhost:8081', poskuša izvesti zahtevo GET za Spring Boot API, ki gostuje na 'http://localhost:8080'. Brskalniki uveljavljajo stroga varnostna pravila za preprečevanje nepooblaščenih navzkrižnih zahtev, zato obstajajo ti pravilniki CORS. The WebMvcConfigurer razred v zaledni konfiguraciji Spring Boot pomaga definirati pravila CORS, ki dovoljujejo specifične izvore in metode, kar na koncu reši težavo.

V ozadju datoteka `CorsConfig.java` definira konfiguracijski razred Spring Boot. The @Fižolček in @Preglasi opombe se uporabljajo za vstavljanje in prilagajanje konfiguracije CORS. V metodi `addCorsMappings()` funkcija `allowedOrigins()` izrecno dovoljuje zahteve iz 'http://localhost:8081', kar zagotavlja, da brskalnik prepozna ta izvor kot zaupanja vreden vir. Vključitev `allowedMethods()` zagotavlja, da so dovoljene vse metode HTTP, vključno z GET, POST in OPTIONS. To je ključnega pomena, ker brskalniki običajno pošljejo zahtevo OPTIONS pred tiskom, da preverijo, ali je dejanska zahteva GET dovoljena.

Na sprednji strani React obravnava zahteve z uporabo Axios, priljubljen odjemalec HTTP. V funkciji »fetchData« datoteke »ProjectPage.tsx« funkcija »axios.get()« pošlje zahtevo GET v zaledje Spring Boot. Možnost `withCredentials` je nastavljena na true, kar omogoča pošiljanje piškotkov in poverilnic za preverjanje pristnosti z zahtevo. Poleg tega je vključena avtorizacijska glava za posredovanje uporabniškega žetona, ki zagotavlja, da je zahteva pravilno overjena. Brez teh konfiguracij bi brskalnik zaradi varnostnih razlogov blokiral zahtevo.

Nazadnje, testna datoteka enote, `CorsTest.java`, potrdi, da konfiguracija CORS deluje po pričakovanjih. Ta preizkus simulira zahtevo HTTP OPTIONS za zaledni API, ki posnema resnično zahtevo pred tiskom, ki jo izvede brskalnik. Test preveri, ali odgovor vsebuje pravilne glave, kot npr Access-Control-Allow-Origin, ki omogoča navzkrižne zahteve iz sprednjega dela. Metoda `MockMvcResultMatchers.header()` zagotavlja, da se strežnik pravilno odziva na zahteve pred tiskom. Z vključitvijo testov enot lahko razvijalci zagotovijo, da je njihova konfiguracija CORS zanesljiva in funkcionalna v različnih okoljih.

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

Raziskovanje CORS v kontekstu varnosti in oblikovanja API-jev

Ko se ukvarjate s CORS (Cross-Origin Resource Sharing) v sodobnih spletnih aplikacijah je ključno razumeti varnostne implikacije za tem. CORS je implementiran kot varnostni ukrep v brskalnikih, da prepreči zlonamernim spletnim mestom nepooblaščene zahteve API v imenu uporabnikov. To je še posebej pomembno v scenarijih, kjer se občutljivi podatki izmenjujejo med sprednjimi in zalednimi storitvami, kot so žetoni za preverjanje pristnosti in uporabniške poverilnice. Ko nastavljate CORS v zaledju Spring Boot, je bistveno, da dovolite samo zaupanja vrednim izvorom dostop do zaščitenih virov, zaradi česar je varnostna konfiguracija ključni element sistemske arhitekture.

Drugi ključni vidik je obdelava zahtev pred tiskom, ki so samodejne zahteve, ki jih brskalnik naredi pred dejansko zahtevo GET ali POST. To se zgodi, ko mora odjemalec potrditi, ali strežnik dovoljuje zahteve navzkrižnega izvora in podpira določene glave ali metode. V nekaterih primerih napačne konfiguracije pri ravnanju s temi zahteve pred letom lahko povzroči težave, kar povzroči napake CORS, tudi če dejanska zahteva dobro deluje v orodjih, kot je Postman. Konfiguracija `CorsRegistry` programa Spring Boot s pravimi glavami in metodami zagotavlja, da so zahteve pred tiskom pravilno obdelane, kar omogoča nemoteno interakcijo med sprednjim in zadnjim delom.

Poleg tega ravnanje s CORS ne sme biti statično ali enotno za vse. V dinamičnih okoljih, kot so tista, ki jih upravljajo mikrostoritve, imajo lahko različni API-ji različne varnostne zahteve. Nekateri API-ji bodo morda morali izpostaviti le določene metode, drugi pa bodo morda zahtevali strožji nadzor nad izvorom. Tu postane pomembna natančna nastavitev konfiguracije CORS za vsako končno točko. Ustrezno upravljanje CORS pomaga tudi pri optimizaciji delovanja API-ja z zmanjšanjem nepotrebnih zahtev pred tiskom in zagotavljanjem nemotene uporabniške interakcije.