React ir Spring Boot CORS problemų sprendimas: užblokuota GET užklausa

CORS klaidų supratimas „Spring Boot“ ir „React“ programose

Kuriant žiniatinklio programas naudojant Reaguoti už priekinę dalį ir Pavasariniai batai Pagrindinė problema, su kuria susiduria kūrėjai, yra liūdnai pagarsėjusi CORS klaida. Ši klaida atsiranda, kai naršyklė blokuoja užklausą dėl saugumo priežasčių, ypač kai bandoma prisijungti prie užpakalinės paslaugos, priglobtos kitame prievade arba domene. Šiuo atveju jūs susiduriate su CORS problema kurdami a GAUTI prašymą iš React į Spring Boot API.

Klaidos pranešimas paprastai rodo, kad naršyklė blokuoja jūsų užklausą, nes Prieiga-Control-Allow-Origin antraštės trūksta arba ji neteisingai sukonfigūruota. Verta paminėti, kad įrankiai kaip Paštininkas netaikykite šių saugos apribojimų, todėl jūsų užklausa gali puikiai veikti „Postman“, bet nepavykti naršyklėje.

Pagal jūsų scenarijų klaidos pranešimas rodo, kad išankstinio patikrinimo užklausa neatitinka prieigos kontrolės patikrinimo. Paprastai taip nutinka, kai tam tikros antraštės arba metodai neleidžiami arba tinkamai sukonfigūruoti serverio CORS politikoje. Nors atrodo, kad CORS konfigūracija yra įdiegta serverio pusėje, gali kilti konkrečių problemų, susijusių su naršyklės užklausų apdorojimu.

Šis straipsnis padės suprasti pagrindinę problemos priežastį ir padės rasti galimus jos sprendimo būdus CORS klaida „React“ ir „Spring Boot“ programoje.

CORS klaidų tvarkymas „React“ ir „Spring Boot“ programose

Aukščiau pateikti scenarijai skirti išspręsti problemą CORS klaidos „React“ sąsajoje ir „Spring Boot“ foninėje sąrankoje. Klaida įvyksta, kai sąsaja, priglobta „http://localhost:8081“, bando pateikti GET užklausą „Spring Boot“ API, priglobtai adresu „http://localhost:8080“. Naršyklės taiko griežtas saugos taisykles, kad būtų išvengta neteisėtų kelių šaltinių užklausų, todėl egzistuoja šios CORS strategijos. The WebMvcConfigurer Klasė „Spring Boot“ foninėje konfigūracijoje padeda apibrėžti CORS taisykles, leidžiančias konkrečias kilmes ir metodus, galiausiai išsprendžiant problemą.

Užpakalinėje programoje „CorsConfig.java“ failas apibrėžia „Spring Boot“ konfigūracijos klasę. The @Pupelė ir @Nepaisyti komentarai naudojami CORS konfigūracijai įterpti ir tinkinti. Naudojant metodą „addCorsMappings()“, funkcija „allowedOrigins()“ aiškiai leidžia gauti užklausas iš „http://localhost:8081“, užtikrindama, kad naršyklė atpažintų šią kilmę kaip patikimą šaltinį. „AllowedMethods()“ įtraukimas užtikrina, kad visi HTTP metodai, įskaitant GET, POST ir OPTIONS, yra leidžiami. Tai labai svarbu, nes naršyklės paprastai siunčia išankstinio patikrinimo OPTIONS užklausą, kad patikrintų, ar faktinė GET užklausa yra leidžiama.

Prieigoje React apdoroja užklausas naudodama Axios, populiarus HTTP klientas. Failo „ProjectPage.tsx“ funkcijoje „fetchData“ funkcija „axios.get()“ siunčia GET užklausą „Spring Boot“ sistemai. Parinktis „withCredentials“ nustatyta į „true“, todėl kartu su užklausa gali būti siunčiami slapukai ir autentifikavimo kredencialai. Be to, įtraukta autorizacijos antraštė, skirta perduoti vartotojo prieigos raktą ir užtikrinti, kad užklausa būtų tinkamai autentifikuota. Be šių konfigūracijų naršyklė blokuotų užklausą dėl saugumo priežasčių.

Galiausiai vieneto bandymo failas „CorsTest.java“ patvirtina, kad CORS konfigūracija veikia taip, kaip tikėtasi. Šis testas imituoja HTTP OPTIONS užklausą užpakalinei API, kuri imituoja tikrą naršyklės pateiktą išankstinio patikrinimo užklausą. Testas patikrina, ar atsakyme yra teisingos antraštės, pvz Prieiga-Control-Allow-Origin, leidžianti teikti kelių šaltinių užklausas iš sąsajos. Metodas „MockMvcResultMatchers.header()“ užtikrina, kad serveris tinkamai reaguoja į išankstinio patikrinimo užklausas. Įtraukdami vienetų testus, kūrėjai gali užtikrinti, kad jų CORS konfigūracija būtų patikima ir funkcionali įvairiose aplinkose.

// 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 tyrinėjimas saugumo ir API dizaino kontekste

Kai susiduriama su CORS (įvairios kilmės išteklių bendrinimas) Šiuolaikinėse žiniatinklio programose labai svarbu suprasti su tuo susijusias saugumo pasekmes. CORS yra įdiegta kaip saugumo priemonė naršyklėse, siekiant užkirsti kelią kenkėjiškoms svetainėms teikti neteisėtas API užklausas vartotojų vardu. Tai ypač svarbu tais atvejais, kai tarp frontend ir backend paslaugų keičiamasi jautriais duomenimis, pvz., autentifikavimo prieigos raktais ir vartotojo kredencialais. Nustatant CORS „Spring Boot“ foninėje sistemoje, labai svarbu leisti tik patikimoms ištakoms pasiekti apsaugotus išteklius, todėl saugos konfigūracija yra pagrindinis sistemos architektūros elementas.

Kitas svarbus aspektas yra išankstinio patikrinimo užklausų, kurios yra automatinės užklausos, kurias naršyklė pateikia prieš faktinę GET arba POST užklausą, tvarkymas. Taip nutinka, kai klientui reikia patvirtinti, ar serveris leidžia vykdyti kelių šaltinių užklausas ir ar palaiko konkrečias antraštes ar metodus. Kai kuriais atvejais netinkamai sukonfigūruojama juos tvarkant išankstinių skrydžių užklausos gali sukelti problemų, dėl kurių gali atsirasti CORS klaidų, net jei tikroji užklausa puikiai veikia tokiuose įrankiuose kaip „Postman“. „Spring Boot“ „CorsRegistry“ konfigūravimas naudojant tinkamas antraštes ir metodus užtikrina, kad išankstinio patikrinimo užklausos būtų tinkamai apdorojamos, o tai leidžia sklandžiai sąveikauti tarp sąsajos ir užpakalinės sistemos.

Be to, CORS valdymas neturėtų būti statiškas arba visiems tinkamas. Dinaminėse aplinkose, pvz., valdomose mikropaslaugomis, skirtingoms API gali būti taikomi skirtingi saugos reikalavimai. Kai kurioms API gali reikėti atskleisti tik tam tikrus metodus, o kitoms gali reikėti griežtesnės kilmės kontrolės. Čia svarbu tiksliai sureguliuoti kiekvieno galutinio taško CORS konfigūraciją. Tinkamas CORS valdymas taip pat padeda optimizuoti API našumą, nes sumažina nereikalingų išankstinio patikrinimo užklausų ir užtikrina sklandų vartotojo sąveiką.