Remedierea problemelor CORS React și Spring Boot: Solicitare GET blocată

Înțelegerea erorilor CORS în aplicațiile Spring Boot și React

Când dezvoltați aplicații web folosind Reacţiona pentru frontend și Cizme de primăvară pentru backend, o problemă comună cu care se confruntă dezvoltatorii este infama eroare CORS. Această eroare apare atunci când browserul blochează o solicitare din motive de securitate, în special atunci când încearcă să se conecteze la un serviciu backend găzduit pe un alt port sau domeniu. În acest caz, aveți de-a face cu o problemă CORS în timp ce faceți un GET cerere de la React la un API Spring Boot.

Mesajul de eroare indică de obicei că browserul vă blochează solicitarea, deoarece Acces-Control-Permite-Origine antetul fie lipsește, fie este configurat incorect. Merită remarcat faptul că instrumentele ca Poştaş nu aplicați aceste restricții de securitate, motiv pentru care solicitarea dvs. ar putea funcționa perfect în Postman, dar eșua în browser.

În scenariul dvs., mesajul de eroare indică faptul că o solicitare preflight nu trece de verificarea controlului accesului. Acest lucru se întâmplă de obicei atunci când anumite anteturi sau metode nu sunt permise sau configurate corect în politica CORS a serverului. În timp ce configurația CORS pare să fie în vigoare pe partea serverului, pot exista probleme specifice cu modul în care gestionează solicitările browserului.

Acest articol vă va ajuta să înțelegeți cauza principală a problemei și vă va ghida prin posibilele soluții pentru a rezolva problema Eroare CORS în aplicația dvs. React și Spring Boot.

Gestionarea erorilor CORS în aplicațiile React și Spring Boot

Scripturile furnizate mai sus urmăresc să rezolve problema erori CORS într-o configurație de backend React și Spring Boot. Eroarea apare atunci când interfața, găzduită pe „http://localhost:8081”, încearcă să facă o solicitare GET către un API Spring Boot găzduit pe „http://localhost:8080”. Browserele aplică reguli stricte de securitate pentru a preveni solicitările neautorizate de origine încrucișată, motiv pentru care există aceste politici CORS. The WebMvcConfigurer clasa din configurația backend Spring Boot ajută la definirea regulilor CORS care permit origini și metode specifice, rezolvând în cele din urmă problema.

În backend, fișierul `CorsConfig.java` definește o clasă de configurare Spring Boot. The @Fasole şi @Override adnotările sunt folosite pentru a injecta și personaliza configurația CORS. În metoda `addCorsMappings()`, funcția `allowedOrigins()` permite în mod explicit solicitări de la 'http://localhost:8081', asigurându-se că browserul recunoaște această origine ca sursă de încredere. Includerea `allowedMethods()` asigură că toate metodele HTTP, inclusiv GET, POST și OPTIONS, sunt permise. Acest lucru este esențial deoarece browserele trimit de obicei o solicitare de OPȚIUNI de zbor preflight pentru a verifica dacă cererea GET reală este permisă.

Pe front-end, React gestionează solicitările folosind Axios, un client HTTP popular. În funcția `fetchData` a fișierului `ProjectPage.tsx`, funcția `axios.get()` trimite o solicitare GET către backend-ul Spring Boot. Opțiunea `withCredentials` este setată la true, permițând cookie-urile și acreditările de autentificare să fie trimise odată cu cererea. În plus, antetul Authorization este inclus pentru a transmite token-ul utilizatorului, asigurându-se că cererea este autentificată corect. Fără aceste configurații, browserul ar bloca solicitarea din motive de securitate.

În sfârșit, fișierul test unitar, `CorsTest.java`, validează că configurația CORS funcționează conform așteptărilor. Acest test simulează o solicitare HTTP OPTIONS către API-ul backend, care imită o solicitare reală de preflight făcută de browser. Testul verifică dacă răspunsul conține anteturile corecte, cum ar fi Acces-Control-Permite-Origine, care permite solicitări de origine încrucișată de la interfață. Metoda `MockMvcResultMatchers.header()` asigură că serverul răspunde corect la solicitările preflight. Prin includerea testelor unitare, dezvoltatorii se pot asigura că configurația lor CORS este fiabilă și funcțională în diferite medii.

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

Explorarea CORS în contextul securității și al designului API

Când ai de-a face cu CORS (Partajare a resurselor între origini) în aplicațiile web moderne, este esențial să înțelegem implicațiile de securitate din spatele acesteia. CORS este implementat ca măsură de securitate de către browsere pentru a împiedica site-urile web rău intenționate să facă solicitări API neautorizate în numele utilizatorilor. Acest lucru este deosebit de important în scenariile în care se fac schimb de date sensibile între serviciile frontend și backend, cum ar fi jetoanele de autentificare și acreditările utilizatorului. Când configurați CORS într-un backend Spring Boot, este esențial să permiteți doar originilor de încredere să acceseze resursele protejate, făcând configurația de securitate un element cheie al arhitecturii sistemului.

Un alt aspect crucial este gestionarea cererilor preflight, care sunt cereri automate făcute de browser înainte de cererea GET sau POST. Acest lucru se întâmplă atunci când clientul trebuie să confirme dacă serverul permite cereri de origine încrucișată și acceptă antete sau metode specifice. În unele cazuri, configurări greșite în gestionarea acestora cererile preflight poate cauza probleme, ducând la erori CORS chiar și atunci când cererea reală funcționează bine în instrumente precum Postman. Configurarea „CorsRegistry” din Spring Boot cu anteturile și metodele potrivite asigură procesarea corectă a cererilor de preflight, permițând o interacțiune ușoară între frontend și backend.

În plus, manipularea CORS nu ar trebui să fie statică sau unică. În mediile dinamice precum cele gestionate cu microservicii, diferitele API-uri pot avea cerințe de securitate diferite. Unele API-uri ar putea avea nevoie doar să expună anumite metode, în timp ce altele ar putea necesita un control mai strict asupra originilor. Aici devine importantă reglarea fină a configurației CORS pentru fiecare punct final. Gestionarea corectă a CORS ajută, de asemenea, la optimizarea performanței API prin reducerea solicitărilor inutile de zbor înainte și asigurând o interacțiune ușoară a utilizatorului.