React un Spring Boot CORS problēmu novēršana: bloķēts GET pieprasījums

Izpratne par CORS kļūdām Spring Boot un React lietotnēs

Izstrādājot tīmekļa lietojumprogrammas, izmantojot Reaģēt priekšgalam un Pavasara zābaki Aizmugursistēmai izplatīta problēma, ar ko saskaras izstrādātāji, ir bēdīgi slavenā CORS kļūda. Šī kļūda rodas, ja pārlūkprogramma drošības apsvērumu dēļ bloķē pieprasījumu, it īpaši, mēģinot izveidot savienojumu ar aizmugursistēmas pakalpojumu, kas mitināts citā portā vai domēnā. Šajā gadījumā jums ir darīšana ar CORS problēmu, veicot a SAŅEMT pieprasījumu no React uz Spring Boot API.

Kļūdas ziņojums parasti norāda, ka pārlūkprogramma bloķē jūsu pieprasījumu, jo Access-Control-Allow-Origin galvenes trūkst vai tā ir nepareizi konfigurēta. Ir vērts atzīmēt, ka tādi rīki kā Pastnieks neieviesiet šos drošības ierobežojumus, tāpēc jūsu pieprasījums var darboties nevainojami programmā Postman, bet neizdoties pārlūkprogrammā.

Jūsu scenārijā kļūdas ziņojums norāda, ka pirmspārbaudes pieprasījums neiztur piekļuves kontroles pārbaudi. Tas parasti notiek, ja noteiktas galvenes vai metodes nav atļautas vai pareizi konfigurētas servera CORS politikā. Lai gan šķiet, ka CORS konfigurācija ir ieviesta servera pusē, var rasties īpašas problēmas ar to, kā tā apstrādā pārlūkprogrammas pieprasījumus.

Šis raksts palīdzēs jums izprast problēmas galveno cēloni un sniegt informāciju par iespējamiem risinājumiem, kā to atrisināt CORS kļūda savā React un Spring Boot lietojumprogrammā.

CORS kļūdu apstrāde React un Spring Boot lietojumprogrammās

Iepriekš sniegto skriptu mērķis ir atrisināt problēmu CORS kļūdas React priekšgalda un Spring Boot aizmugursistēmas iestatījumos. Kļūda rodas, kad priekšgals, kas mitināts vietnē http://localhost:8081, mēģina veikt GET pieprasījumu Spring Boot API, kas mitināts vietnē http://localhost:8080. Pārlūkprogrammas ievieš stingrus drošības noteikumus, lai novērstu nesankcionētus vairāku izcelsmes pieprasījumus, tāpēc pastāv šīs CORS politikas. The WebMvcConfigurer klase Spring Boot aizmugursistēmas konfigurācijā palīdz definēt CORS noteikumus, kas pieļauj konkrētu izcelsmi un metodes, galu galā atrisinot problēmu.

Aizmugurprogrammā fails CorsConfig.java definē Spring Boot konfigurācijas klasi. The @Pupiņa un @Override anotācijas tiek izmantotas, lai ievadītu un pielāgotu CORS konfigurāciju. Metodē "addCorsMappings()" funkcija "allowedOrigins()" skaidri atļauj pieprasījumus no "http://localhost:8081", nodrošinot, ka pārlūkprogramma atpazīst šo izcelsmi kā uzticamu avotu. Iekļaušana `allowedMethods() nodrošina, ka ir atļautas visas HTTP metodes, tostarp GET, POST un OPTIONS. Tas ir ļoti svarīgi, jo pārlūkprogrammas parasti nosūta pirmspārbaudes OPTIONS pieprasījumu, lai pārbaudītu, vai faktiskais GET pieprasījums ir atļauts.

Priekšgalā React apstrādā pieprasījumus, izmantojot Axios, populārs HTTP klients. Faila ProjectPage.tsx funkcijā "fetchData" funkcija "axios.get()" nosūta GET pieprasījumu Spring Boot aizmugursistēmai. Opcija "withCredentials" ir iestatīta uz True, ļaujot kopā ar pieprasījumu nosūtīt sīkfailus un autentifikācijas akreditācijas datus. Turklāt ir iekļauta autorizācijas galvene, lai nodotu lietotāja pilnvaru, nodrošinot, ka pieprasījums ir pareizi autentificēts. Bez šīm konfigurācijām pārlūkprogramma bloķētu pieprasījumu drošības apsvērumu dēļ.

Visbeidzot, vienības pārbaudes fails CorsTest.java pārbauda, ​​vai CORS konfigurācija darbojas, kā paredzēts. Šis tests simulē HTTP OPTIONS pieprasījumu aizmugursistēmas API, kas atdarina īstu pārlūkprogrammas veikto pirmspārbaudes pieprasījumu. Tests pārbauda, ​​vai atbildē ir pareizas galvenes, piemēram, Access-Control-Allow-Origin, kas ļauj veikt starpizcelsmes pieprasījumus no priekšgala. Metode "MockMvcResultMatchers.header()" nodrošina, ka serveris pareizi reaģē uz pirmspārbaudes pieprasījumiem. Iekļaujot vienību testus, izstrādātāji var nodrošināt, ka viņu CORS konfigurācija ir uzticama un funkcionāla dažādās vidēs.

// 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 izpēte drošības un API dizaina kontekstā

Kad tiek galā ar CORS (vairākas izcelsmes resursu koplietošana) mūsdienu tīmekļa lietojumprogrammās ir ļoti svarīgi izprast drošības sekas. Pārlūkprogrammas CORS ievieš kā drošības līdzekli, lai neļautu ļaunprātīgām vietnēm veikt nesankcionētus API pieprasījumus lietotāju vārdā. Tas ir īpaši svarīgi gadījumos, kad starp priekšgala un aizmugursistēmas pakalpojumiem notiek sensitīvu datu apmaiņa, piemēram, autentifikācijas pilnvaras un lietotāja akreditācijas dati. Iestatot CORS Spring Boot aizmugursistēmā, ir svarīgi atļaut tikai uzticamiem avotiem piekļūt aizsargātajiem resursiem, padarot drošības konfigurāciju par galveno sistēmas arhitektūras elementu.

Vēl viens būtisks aspekts ir pirmsflight pieprasījumu apstrāde, kas ir automātiski pieprasījumi, ko pārlūkprogramma veic pirms faktiskā GET vai POST pieprasījuma. Tas notiek, ja klientam ir jāapstiprina, vai serveris pieļauj vairāku izcelsmes pieprasījumus un atbalsta noteiktas galvenes vai metodes. Dažos gadījumos nepareiza konfigurācija to apstrādē pirmslidojuma pieprasījumi var radīt problēmas, izraisot CORS kļūdas pat tad, ja faktiskais pieprasījums darbojas labi tādos rīkos kā Postman. Spring Boot CorsRegistry konfigurēšana ar pareizajām galvenēm un metodēm nodrošina, ka pirmspārbaudes pieprasījumi tiek apstrādāti pareizi, nodrošinot vienmērīgu mijiedarbību starp priekšgalu un aizmugursistēmu.

Turklāt CORS apstrādei nevajadzētu būt statiskai vai universālai. Dinamiskās vidēs, piemēram, tajās, kas tiek pārvaldītas ar mikropakalpojumiem, dažādām API var būt atšķirīgas drošības prasības. Dažām API, iespējams, būs jāatklāj tikai noteiktas metodes, savukārt citām var būt nepieciešama stingrāka izcelsmes kontrole. Šeit ir svarīga CORS konfigurācijas precizēšana katram galapunktam. Pareiza CORS pārvaldība palīdz arī optimizēt API veiktspēju, samazinot nevajadzīgos pirmslidojuma pieprasījumus un nodrošinot vienmērīgu lietotāja mijiedarbību.