A React és Spring Boot CORS-problémák kijavítása: blokkolt GET-kérés

A Spring Boot és React alkalmazások CORS-hibáinak megértése

Webes alkalmazások fejlesztése során a Reagál a frontend és Spring Boot a háttérben a fejlesztők gyakori problémája a hírhedt CORS hiba. Ez a hiba akkor fordul elő, ha a böngésző biztonsági okokból blokkol egy kérést, különösen akkor, ha egy másik porton vagy tartományon tárolt háttérszolgáltatáshoz próbál csatlakozni. Ebben az esetben Ön egy CORS-problémával foglalkozik, miközben a GET kérés a Reactból egy Spring Boot API-ra.

A hibaüzenet általában azt jelzi, hogy a böngésző blokkolja kérését, mert a Access-Control-Allow-Origin a fejléc hiányzik vagy rosszul van beállítva. Érdemes megjegyezni, hogy az eszközök, mint Postás ne kényszerítse ki ezeket a biztonsági korlátozásokat, ezért előfordulhat, hogy a kérése tökéletesen működik a Postmanban, de sikertelen a böngészőben.

Az Ön forgatókönyve szerint a hibaüzenet azt jelzi, hogy az elővizsgálati kérés nem megy át a hozzáférés-vezérlési ellenőrzésen. Ez általában akkor fordul elő, ha bizonyos fejlécek vagy metódusok nincsenek engedélyezve vagy megfelelően konfigurálva a kiszolgáló CORS-házirendjében. Bár úgy tűnik, hogy a CORS konfiguráció a helyén van a szerver oldalon, bizonyos problémák adódhatnak a böngészőkérések kezelésével kapcsolatban.

Ez a cikk segít megérteni a probléma kiváltó okát, és végigvezeti Önt a lehetséges megoldásokon CORS hiba a React és Spring Boot alkalmazásban.

CORS-hibák kezelése React és Spring Boot alkalmazásokban

A fent megadott szkriptek célja a probléma megoldása CORS hibák React frontend és Spring Boot háttérbeállításban. A hiba akkor fordul elő, amikor a „http://localhost:8081” címen üzemeltetett frontend GET-kérelmet próbál küldeni a „http://localhost:8080” címen üzemeltetett Spring Boot API-hoz. A böngészők szigorú biztonsági szabályokat kényszerítenek ki, hogy megakadályozzák a jogosulatlan, több forrásból származó kérelmeket, ezért léteznek ezek a CORS-házirendek. A WebMvcConfigurer osztály a Spring Boot háttérkonfigurációjában segít meghatározni a CORS-szabályokat, amelyek lehetővé teszik az adott eredetet és metódusokat, végül megoldva a problémát.

A háttérben a `CorsConfig.java' fájl egy Spring Boot konfigurációs osztályt határoz meg. A @Bab és @Felülbírálás a megjegyzések a CORS konfiguráció beillesztésére és testreszabására szolgálnak. Az "addCorsMappings()" metódusban az "allowedOrigins()" függvény kifejezetten engedélyezi a "http://localhost:8081" címről érkező kéréseket, biztosítva, hogy a böngésző ezt az eredetet megbízható forrásként ismerje fel. Az "allowedMethods()" beépítése biztosítja, hogy minden HTTP metódus, beleértve a GET, POST és OPTIONS, engedélyezett legyen. Ez döntő fontosságú, mert a böngészők általában egy előzetes OPTIONS kérést küldenek annak ellenőrzésére, hogy a tényleges GET kérés engedélyezett-e.

A kezelőfelületen a React a kéréseket kezeli Axios, egy népszerű HTTP-kliens. A "ProjectPage.tsx" fájl "fetchData" függvényében az "axios.get()" függvény GET kérést küld a Spring Boot háttérrendszernek. A "withCredentials" beállítás igazra van állítva, lehetővé téve a cookie-k és hitelesítési adatok elküldését a kéréssel együtt. Ezenkívül az engedélyezési fejléc is szerepel a felhasználói token átadásához, biztosítva a kérés megfelelő hitelesítését. Ezen konfigurációk nélkül a böngésző biztonsági okokból blokkolná a kérést.

Végül a `CorsTest.java' egységtesztfájl ellenőrzi, hogy a CORS-konfiguráció a várt módon működik-e. Ez a teszt egy HTTP OPTIONS kérést szimulál a háttér API-hoz, amely a böngésző által küldött valódi előzetes ellenőrzési kérést utánozza. A teszt ellenőrzi, hogy a válasz tartalmazza-e a megfelelő fejléceket, mint pl Access-Control-Allow-Origin, amely lehetővé teszi a keresztirányú kéréseket a frontendről. A `MockMvcResultMatchers.header()` metódus biztosítja, hogy a szerver megfelelően válaszoljon az elővizsgálati kérésekre. Az egységtesztek bevonásával a fejlesztők biztosíthatják, hogy CORS-konfigurációjuk megbízható és működőképes legyen a különböző környezetekben.

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

A CORS felfedezése a biztonság és az API-tervezés kontextusában

Amikor foglalkozik CORS (cross-Origin Resource Sharing) a modern webalkalmazásokban döntő fontosságú, hogy megértsük a mögöttes biztonsági vonatkozásokat. A CORS-t a böngészők biztonsági intézkedésként valósítják meg, hogy megakadályozzák a rosszindulatú webhelyek jogosulatlan API-kéréseit a felhasználók nevében. Ez különösen fontos olyan esetekben, amikor bizalmas adatok cseréje történik a frontend és a háttérszolgáltatások, például a hitelesítési tokenek és a felhasználói hitelesítő adatok között. Amikor a CORS-t Spring Boot háttérrendszerben állítja be, elengedhetetlen, hogy csak megbízható források férhessenek hozzá a védett erőforrásokhoz, így a biztonsági konfiguráció a rendszer architektúrájának kulcsfontosságú eleme.

Egy másik kulcsfontosságú szempont a vizsgálat előtti kérések kezelése, amelyek a böngésző által a tényleges GET vagy POST kérés előtti automatikus kérések. Ez akkor fordul elő, ha az ügyfélnek meg kell erősítenie, hogy a kiszolgáló engedélyezi-e a több eredetű kérelmet, és támogatja-e az adott fejléceket vagy metódusokat. Egyes esetekben hibás konfigurációk ezek kezelése során repülés előtti kérések problémákat okozhat, ami CORS-hibákat eredményezhet, még akkor is, ha a tényleges kérés jól működik olyan eszközökben, mint a Postman. A Spring Boot `CorsRegistry-jének) a megfelelő fejlécekkel és metódusokkal történő konfigurálása biztosítja, hogy az elővizsgálati kérelmek megfelelően feldolgozásra kerüljenek, ami zökkenőmentes interakciót tesz lehetővé a frontend és a háttérrendszer között.

Ezenkívül a CORS kezelésének nem szabad statikusnak vagy mindenkire érvényesnek lennie. A mikroszolgáltatásokkal kezelt dinamikus környezetekben a különböző API-knak eltérő biztonsági követelményei lehetnek. Előfordulhat, hogy egyes API-knak csak bizonyos módszereket kell közzétenniük, míg mások szigorúbb ellenőrzést igényelhetnek az eredet felett. Itt válik fontossá a CORS-konfiguráció finomhangolása az egyes végpontokhoz. A megfelelő CORS-kezelés az API-teljesítmény optimalizálását is segíti azáltal, hogy csökkenti a szükségtelen előzetes vizsgálati kéréseket és biztosítja a zökkenőmentes felhasználói interakciót.