Reacti ja Spring Boot CORS-i probleemide lahendamine: GET-taotlus on blokeeritud

CORS-i vigade mõistmine Spring Boot ja Reacti rakendustes

Veebirakenduste arendamisel kasutades Reageerige esiosa jaoks ja Kevadsaabas taustaprogrammi puhul on arendajate levinud probleem kurikuulus CORS-i viga. See tõrge ilmneb siis, kui brauser blokeerib päringu turvalisuse põhjustel, eriti kui proovite luua ühendust mõnes teises pordis või domeenis hostitud taustateenusega. Sel juhul tegelete a. tegemise ajal CORS-i probleemiga HANGI taotlus Reactist Spring Boot API-le.

Veateade näitab tavaliselt, et brauser blokeerib teie päringu, kuna Access-Control-Allow-Origin päis puudub või on valesti konfigureeritud. Väärib märkimist, et tööriistad nagu Postimees Ärge jõustage neid turvapiiranguid, mistõttu võib teie taotlus Postmanis suurepäraselt töötada, kuid brauseris ebaõnnestuda.

Teie stsenaariumi korral näitab veateade, et eelkontrolli taotlus ei läbi juurdepääsukontrolli kontrolli. See juhtub tavaliselt siis, kui teatud päised või meetodid pole serveri CORS-poliitikas lubatud või õigesti konfigureeritud. Kuigi CORS-i konfiguratsioon näib olevat serveri poolel paigas, võib selle brauseripäringute käsitlemisel esineda spetsiifilisi probleeme.

See artikkel aitab teil mõista probleemi algpõhjust ja juhendab teid võimalike lahenduste leidmisel selle lahendamiseks CORS-i viga rakenduses React ja Spring Boot.

CORS-i vigade käsitlemine Reacti ja Spring Boot rakendustes

Ülaltoodud skriptide eesmärk on lahendada probleem CORS-i vead Reacti kasutajaliidese ja Spring Booti taustaprogrammi seadistuses. Viga ilmneb siis, kui aadressil „http://localhost:8081” hostitud kasutajaliides proovib teha GET-päringu Spring Boot API-le, mis on hostitud saidil „http://localhost:8080”. Brauserid rakendavad rangeid turbeeeskirju, et vältida volitamata ristpäritolupäringuid, mistõttu on need CORS-i eeskirjad olemas. The WebMvcConfigurer Klass Spring Booti taustaprogrammi konfiguratsioonis aitab määratleda CORS-i reegleid, mis võimaldavad konkreetseid lähtekohti ja meetodeid, lahendades lõpuks probleemi.

Taustaprogrammis määratleb fail `CorsConfig.java' Spring Boot konfiguratsiooniklassi. The @Bean ja @Alista märkusi kasutatakse CORS-i konfiguratsiooni sisestamiseks ja kohandamiseks. Meetodi "addCorsMappings()" puhul lubab funktsioon "allowedOrigins()" selgesõnaliselt päringuid aadressilt "http://localhost:8081", tagades, et brauser tuvastab selle lähtekoha usaldusväärse allikana. Funktsiooni „allowedMethods()” kaasamine tagab, et kõik HTTP-meetodid, sealhulgas GET, POST ja OPTIONS, on lubatud. See on ülioluline, sest brauserid saadavad tavaliselt eelkontrolli OPTIONS päringu, et kontrollida, kas tegelik GET-päring on lubatud.

Esiküljel töötleb React taotlusi kasutades Axios, populaarne HTTP-klient. Faili „ProjectPage.tsx” funktsioonis „fetchData” saadab funktsioon „axios.get()” Spring Booti taustaprogrammile GET-päringu. Valik „withCredentials” on seatud väärtusele Tõene, mis võimaldab päringuga saata küpsiseid ja autentimismandaate. Lisaks on lisatud autoriseerimispäis, mis edastab kasutaja loa, tagades päringu nõuetekohase autentimise. Ilma nende seadistusteta blokeeriks brauser taotluse turvakaalutlustel.

Lõpuks kontrollib üksuse testfail CorsTest.java, et CORS-i konfiguratsioon töötab ootuspäraselt. See test simuleerib HTTP OPTIONSi päringut taustarakenduse API-le, mis jäljendab brauseri tegelikku eelkontrolli taotlust. Test kontrollib, kas vastus sisaldab õigeid päiseid, nt Access-Control-Allow-Origin, mis võimaldab ristpäritolu päringuid esiservalt. Meetod "MockMvcResultMatchers.header()" tagab, et server vastab eelkontrolli päringutele õigesti. Seadmetestide kaasamisega saavad arendajad tagada, et nende CORS-i konfiguratsioon on erinevates keskkondades usaldusväärne ja funktsionaalne.

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

CORS-i uurimine turvalisuse ja API disaini kontekstis

Kui tegemist on CORS (allikateülene ressursside jagamine) tänapäevaste veebirakenduste puhul on ülioluline mõista selle taga olevaid turbemõjusid. CORS-i rakendavad brauserid turvameetmena, et takistada pahatahtlikel veebisaitidel kasutajate nimel volitamata API päringuid tegemast. See on eriti oluline stsenaariumide puhul, kus esi- ja taustateenuste vahel vahetatakse tundlikke andmeid, nagu autentimismärgid ja kasutaja mandaadid. CORS-i seadistamisel Spring Booti taustaprogrammis on oluline lubada ainult usaldusväärsetel päritoluallikatel juurdepääs kaitstud ressurssidele, muutes turbekonfiguratsiooni süsteemi arhitektuuri võtmeelemendiks.

Teine oluline aspekt on eelkontrolli taotluste käsitlemine, mis on automaatsed päringud, mille brauser teeb enne tegelikku GET- või POST-päringut. See juhtub siis, kui klient peab kinnitama, kas server lubab päritoluüleseid päringuid ja toetab konkreetseid päiseid või meetodeid. Mõnel juhul on nende käsitsemisel valesti seadistatud lennueelsed taotlused võib põhjustada probleeme, põhjustades CORS-i tõrkeid isegi siis, kui tegelik päring töötab hästi sellistes tööriistades nagu Postman. Spring Booti CorsRegistry seadistamine õigete päiste ja meetoditega tagab, et eelkontrolli taotlusi töödeldakse õigesti, võimaldades sujuvat interaktsiooni kasutajaliidese ja taustaprogrammi vahel.

Lisaks ei tohiks CORS-i käsitsemine olla staatiline ega kõigile sobiv. Dünaamilistes keskkondades, nagu need, mida hallatakse mikroteenustega, võivad erinevatel API-del olla erinevad turvanõuded. Mõned API-d võivad vajada ainult teatud meetodite avaldamist, samas kui teised võivad nõuda päritolu rangemat kontrolli. Siin muutub oluliseks CORS-i konfiguratsiooni peenhäälestus iga lõpp-punkti jaoks. Korrektne CORS-i haldamine aitab optimeerida ka API jõudlust, vähendades tarbetuid eelkontrolli taotlusi ja tagades kasutaja sujuva suhtluse.