Rješavanje problema s Reactom i Spring Boot CORS-om: Blokiran GET zahtjev

Razumijevanje CORS pogrešaka u Spring Boot i React aplikacijama

Prilikom razvoja web aplikacija korištenjem Reagiraj za sučelje i Proljetna čizma za pozadinu, uobičajeni problem s kojim se programeri suočavaju je zloglasna CORS pogreška. Ova se pogreška javlja kada preglednik blokira zahtjev zbog sigurnosnih razloga, posebno kada se pokušava povezati s pozadinskom uslugom koja se nalazi na drugom priključku ili domeni. U ovom slučaju imate posla s problemom CORS-a dok pravite a GET zahtjev iz Reacta na Spring Boot API.

Poruka o pogrešci obično označava da preglednik blokira vaš zahtjev jer Access-Control-Allow-Origin zaglavlje ili nedostaje ili je neispravno konfigurirano. Vrijedno je napomenuti da alati poput Poštar nemojte provoditi ova sigurnosna ograničenja, zbog čega bi vaš zahtjev mogao savršeno funkcionirati u Postmanu, ali ne bi uspio u pregledniku.

U vašem scenariju, poruka o pogrešci označava da zahtjev prije leta ne prolazi provjeru kontrole pristupa. To se obično događa kada određena zaglavlja ili metode nisu dopuštene ili ispravno konfigurirane u CORS politici poslužitelja. Iako se čini da konfiguracija CORS-a postoji na strani poslužitelja, mogu postojati određeni problemi s načinom na koji obrađuje zahtjeve preglednika.

Ovaj će vam članak pomoći razumjeti glavni uzrok problema i voditi vas kroz moguća rješenja za njegovo rješavanje CORS pogreška u vašoj React i Spring Boot aplikaciji.

Rukovanje CORS pogreškama u React i Spring aplikacijama za pokretanje

Gore navedene skripte imaju za cilj riješiti problem CORS pogreške u postavkama sučelja React i pozadinskog sustava Spring Boot. Pogreška se javlja kada sučelje, smješteno na 'http://localhost:8081', pokuša uputiti GET zahtjev Spring Boot API-ju hostiranom na 'http://localhost:8080'. Preglednici provode stroga sigurnosna pravila kako bi spriječili neovlaštene zahtjeve iz drugog izvora, zbog čega postoje ova CORS pravila. The WebMvcConfigurer klasa u pozadinskoj konfiguraciji Spring Boot pomaže definirati CORS pravila koja dopuštaju specifično podrijetlo i metode, čime se u konačnici rješava problem.

U pozadini, datoteka `CorsConfig.java` definira konfiguracijsku klasu Spring Boot. The @Grah i @Nadjačaj anotacije se koriste za ubacivanje i prilagodbu konfiguracije CORS-a. U metodi `addCorsMappings()`, funkcija `allowedOrigins()` izričito dopušta zahtjeve s 'http://localhost:8081', osiguravajući da preglednik prepozna ovo podrijetlo kao izvor od povjerenja. Uključivanje `allowedMethods()` osigurava da su sve HTTP metode, uključujući GET, POST i OPTIONS, dopuštene. Ovo je ključno jer preglednici obično šalju zahtjev OPTIONS prije provjere kako bi provjerili je li stvarni zahtjev GET dopušten.

Na sučelju, React obrađuje zahtjeve pomoću Axios, popularni HTTP klijent. U funkciji `fetchData` datoteke `ProjectPage.tsx`, funkcija `axios.get()` šalje GET zahtjev Backendu Spring Boot-a. Opcija `withCredentials` postavljena je na true, dopuštajući slanje kolačića i vjerodajnica za provjeru autentičnosti uz zahtjev. Dodatno, zaglavlje za autorizaciju uključeno je za prosljeđivanje korisničkog tokena, osiguravajući da je zahtjev ispravno autentificiran. Bez ovih konfiguracija, preglednik bi blokirao zahtjev zbog sigurnosnih razloga.

Na kraju, datoteka jediničnog testa, `CorsTest.java`, potvrđuje da konfiguracija CORS-a radi prema očekivanjima. Ovaj test simulira HTTP OPTIONS zahtjev prema pozadinskom API-ju, koji oponaša stvarni zahtjev prije provjere koji postavlja preglednik. Test provjerava sadrži li odgovor ispravna zaglavlja, kao što su Access-Control-Allow-Origin, koji omogućuje cross-origin zahtjeve iz sučelja. Metoda `MockMvcResultMatchers.header()` osigurava da poslužitelj ispravno odgovara na zahtjeve prije provjere. Uključivanjem jediničnih testova, programeri mogu osigurati da je njihova CORS konfiguracija pouzdana i funkcionalna u različitim okruženjima.

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

Istraživanje CORS-a u kontekstu sigurnosti i API dizajna

Kada se radi o CORS (dijeljenje izvora s više izvora) u modernim web aplikacijama ključno je razumjeti sigurnosne implikacije iza toga. CORS je implementiran kao sigurnosna mjera od strane preglednika kako bi se spriječilo zlonamjerno web-mjesto od upućivanja neovlaštenih API zahtjeva u ime korisnika. Ovo je posebno važno u scenarijima u kojima se osjetljivi podaci razmjenjuju između sučelja i pozadinskih usluga, poput autentifikacijskih tokena i korisničkih vjerodajnica. Prilikom postavljanja CORS-a u pozadini Spring Boot-a, bitno je dopustiti samo pouzdanim izvorima pristup zaštićenim resursima, čime sigurnosna konfiguracija postaje ključni element arhitekture sustava.

Još jedan ključni aspekt je rukovanje zahtjevima prije leta, koji su automatski zahtjevi koje preglednik postavlja prije stvarnog zahtjeva GET ili POST. To se događa kada klijent treba potvrditi dopušta li poslužitelj zahtjeve s različitim izvorima i podržava li određena zaglavlja ili metode. U nekim slučajevima, pogrešne konfiguracije u rukovanju njima zahtjevi prije leta može uzrokovati probleme, što rezultira CORS pogreškama čak i kada stvarni zahtjev radi dobro u alatima kao što je Postman. Konfiguracija `CorsRegistry` Spring Boot-a s pravim zaglavljima i metodama osigurava da se zahtjevi za pregled ispravno obrađuju, omogućujući glatku interakciju između sučelja i pozadine.

Štoviše, rukovanje CORS-om ne bi trebalo biti statično ili univerzalno za sve. U dinamičkim okruženjima poput onih kojima se upravlja mikroservisima, različiti API-ji mogu imati različite sigurnosne zahtjeve. Neki API-ji možda trebaju izložiti samo određene metode, dok drugi mogu zahtijevati strožu kontrolu nad izvorima. Ovdje fino podešavanje CORS konfiguracije za svaku krajnju točku postaje važno. Ispravno upravljanje CORS-om također pomaže u optimiziranju performansi API-ja smanjenjem nepotrebnih zahtjeva prije provjere i osiguravanjem glatke interakcije korisnika.