प्रतिक्रिया आणि स्प्रिंग बूट CORS समस्यांचे निराकरण करणे: अवरोधित GET विनंती

स्प्रिंग बूट आणि प्रतिक्रिया ॲप्समधील CORS त्रुटी समजून घेणे

वापरून वेब अनुप्रयोग विकसित करताना प्रतिक्रिया द्या फ्रंटएंडसाठी आणि स्प्रिंग बूट बॅकएंडसाठी, विकासकांना भेडसावणारी एक सामान्य समस्या ही कुप्रसिद्ध CORS त्रुटी आहे. सुरक्षा कारणांमुळे ब्राउझर विनंती अवरोधित करते तेव्हा ही त्रुटी उद्भवते, विशेषत: वेगळ्या पोर्ट किंवा डोमेनवर होस्ट केलेल्या बॅकएंड सेवेशी कनेक्ट करण्याचा प्रयत्न करताना. या प्रकरणात, तुम्ही ए बनवताना CORS समस्येचा सामना करत आहात विनंती मिळवा प्रतिक्रिया पासून स्प्रिंग बूट API वर.

त्रुटी संदेश सहसा सूचित करतो की ब्राउझर तुमची विनंती अवरोधित करत आहे कारण प्रवेश-नियंत्रण-अनुमती-मूळ शीर्षलेख एकतर गहाळ आहे किंवा चुकीच्या पद्धतीने कॉन्फिगर केले आहे. हे लक्षात घेण्यासारखे आहे की साधने सारखी पोस्टमन या सुरक्षा निर्बंधांची अंमलबजावणी करू नका, म्हणूनच तुमची विनंती पोस्टमनमध्ये उत्तम प्रकारे कार्य करू शकते परंतु ब्राउझरमध्ये अयशस्वी होऊ शकते.

तुमच्या परिस्थितीमध्ये, एरर मेसेज सूचित करतो की प्रीफ्लाइट विनंती ऍक्सेस कंट्रोल चेक पास करत नाही. हे विशेषत: जेव्हा सर्व्हरच्या CORS धोरणामध्ये विशिष्ट शीर्षलेख किंवा पद्धतींना परवानगी नसते किंवा योग्यरित्या कॉन्फिगर केलेले नसते तेव्हा घडते. सर्व्हरच्या बाजूने CORS कॉन्फिगरेशन सुरू असल्याचे दिसत असताना, ते ब्राउझरच्या विनंत्या कशा हाताळतात यासह विशिष्ट समस्या असू शकतात.

हा लेख आपल्याला समस्येचे मूळ कारण समजून घेण्यास आणि निराकरण करण्यासाठी संभाव्य उपायांबद्दल मार्गदर्शन करण्यात मदत करेल CORS त्रुटी तुमच्या प्रतिक्रिया आणि स्प्रिंग बूट ऍप्लिकेशनमध्ये.

प्रतिक्रिया आणि स्प्रिंग बूट ऍप्लिकेशनमध्ये CORS त्रुटी हाताळणे

वरील दिलेल्या स्क्रिप्टचे उद्दिष्ट ची समस्या सोडवणे आहे CORS त्रुटी प्रतिक्रिया फ्रंटएंड आणि स्प्रिंग बूट बॅकएंड सेटअपमध्ये. जेव्हा 'http://localhost:8081' वर होस्ट केलेला फ्रंटएंड, 'http://localhost:8080' वर होस्ट केलेल्या स्प्रिंग बूट API ला GET विनंती करण्याचा प्रयत्न करतो तेव्हा त्रुटी उद्भवते. अनधिकृत क्रॉस-ओरिजिन विनंत्या टाळण्यासाठी ब्राउझर कडक सुरक्षा नियम लागू करतात, म्हणूनच ही CORS धोरणे अस्तित्वात आहेत. द WebMvcConfigurer स्प्रिंग बूट बॅकएंड कॉन्फिगरेशनमधील वर्ग CORS नियम परिभाषित करण्यात मदत करतो जे विशिष्ट मूळ आणि पद्धतींना परवानगी देतात, शेवटी समस्येचे निराकरण करतात.

बॅकएंडमध्ये, `CorsConfig.java` फाइल स्प्रिंग बूट कॉन्फिगरेशन क्लास परिभाषित करते. द @बीन आणि @ओव्हरराइड कॉर्स कॉन्फिगरेशन इंजेक्ट करण्यासाठी आणि सानुकूलित करण्यासाठी भाष्ये वापरली जातात. `addCorsMappings()` पद्धतीमध्ये, `allowedOrigins()` फंक्शन 'http://localhost:8081' कडील विनंत्यांना स्पष्टपणे अनुमती देते, हे सुनिश्चित करून की ब्राउझर या मूळला विश्वसनीय स्रोत म्हणून ओळखतो. `allowedMethods()` चा समावेश GET, POST आणि OPTIONS सह सर्व HTTP पद्धतींना परवानगी असल्याची खात्री करतो. हे महत्त्वपूर्ण आहे कारण वास्तविक GET विनंतीला परवानगी आहे की नाही हे तपासण्यासाठी ब्राउझर सामान्यत: प्रीफ्लाइट OPTIONS विनंती पाठवतात.

फ्रंटएंडवर, प्रतिक्रिया वापरून विनंत्या हाताळते Axios, एक लोकप्रिय HTTP क्लायंट. `ProjectPage.tsx` फाईलच्या `fetchData` फंक्शनमध्ये, `axios.get()` फंक्शन स्प्रिंग बूट बॅकएंडला GET विनंती पाठवते. विनंतीसह कुकीज आणि प्रमाणीकरण क्रेडेन्शियल्स पाठवण्याची अनुमती देऊन `विथ क्रेडेंशियल्स` पर्याय सत्य वर सेट केला आहे. याव्यतिरिक्त, वापरकर्त्याचे टोकन पास करण्यासाठी अधिकृतता शीर्षलेख समाविष्ट केला आहे, विनंती योग्यरित्या प्रमाणीकृत आहे याची खात्री करून. या कॉन्फिगरेशनशिवाय, सुरक्षिततेच्या कारणांमुळे ब्राउझर विनंती अवरोधित करेल.

शेवटी, युनिट चाचणी फाइल, `CorsTest.java`, CORS कॉन्फिगरेशन अपेक्षेप्रमाणे काम करत असल्याचे प्रमाणित करते. ही चाचणी बॅकएंड API साठी HTTP पर्याय विनंतीचे अनुकरण करते, जी ब्राउझरद्वारे केलेल्या वास्तविक प्रीफ्लाइट विनंतीची नक्कल करते. चाचणी तपासते की प्रतिसादात योग्य शीर्षलेख आहेत, जसे की प्रवेश-नियंत्रण-अनुमती-मूळ, जे फ्रंटएंडकडून क्रॉस-ओरिजिन विनंत्यांना अनुमती देते. `MockMvcResultMatchers.header()` पद्धत सर्व्हर प्रीफ्लाइट विनंत्यांना योग्य प्रतिसाद देत असल्याची खात्री करते. युनिट चाचण्यांचा समावेश करून, विकासक खात्री करू शकतात की त्यांचे CORS कॉन्फिगरेशन विविध वातावरणात विश्वसनीय आणि कार्यक्षम आहे.

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

१

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

सुरक्षा आणि API डिझाइनच्या संदर्भात CORS एक्सप्लोर करणे

व्यवहार करताना CORS (क्रॉस-ओरिजिन रिसोर्स शेअरिंग) आधुनिक वेब ऍप्लिकेशन्समध्ये, त्यामागील सुरक्षितता परिणाम समजून घेणे महत्त्वाचे आहे. दुर्भावनायुक्त वेबसाइट्सना वापरकर्त्यांच्या वतीने अनधिकृत API विनंत्या करण्यापासून रोखण्यासाठी ब्राउझरद्वारे सुरक्षितता उपाय म्हणून CORS लागू केले जाते. हे विशेषतः अशा परिस्थितीत महत्वाचे आहे जेथे प्रमाणीकरण टोकन आणि वापरकर्ता क्रेडेन्शियल्स सारख्या फ्रंटएंड आणि बॅकएंड सेवांमध्ये संवेदनशील डेटाची देवाणघेवाण केली जाते. स्प्रिंग बूट बॅकएंडमध्ये CORS सेट अप करताना, सुरक्षितता कॉन्फिगरेशनला सिस्टमच्या आर्किटेक्चरचा एक महत्त्वाचा घटक बनवून, संरक्षित संसाधनांमध्ये प्रवेश करण्यासाठी केवळ विश्वसनीय मूळना परवानगी देणे आवश्यक आहे.

प्रीफ्लाइट विनंत्या हाताळणे ही आणखी एक महत्त्वाची बाब आहे, जी वास्तविक GET किंवा POST विनंतीपूर्वी ब्राउझरद्वारे स्वयंचलित विनंत्या आहेत. जेव्हा क्लायंटला सर्व्हर क्रॉस-ओरिजिन विनंत्यांना अनुमती देतो आणि विशिष्ट शीर्षलेख किंवा पद्धतींना समर्थन देतो किंवा नाही याची पुष्टी करणे आवश्यक असते तेव्हा असे होते. काही प्रकरणांमध्ये, हे हाताळण्यात चुकीचे कॉन्फिगरेशन प्रीफ्लाइट विनंत्या पोस्टमॅन सारख्या साधनांमध्ये वास्तविक विनंती ठीक काम करत असतानाही CORS त्रुटी निर्माण करू शकतात. योग्य शीर्षलेख आणि पद्धतींसह स्प्रिंग बूटची `CorsRegistry` कॉन्फिगर केल्याने हे सुनिश्चित होते की प्रीफ्लाइट विनंत्या योग्यरितीने प्रक्रिया केल्या गेल्या आहेत, ज्यामुळे फ्रंटएंड आणि बॅकएंड दरम्यान सहज संवाद होऊ शकतो.

शिवाय, CORS हाताळणी स्थिर किंवा एक-आकार-फिट-सर्व नसावी. डायनॅमिक वातावरणात जसे की मायक्रोसर्व्हिसेसने व्यवस्थापित केले जाते, भिन्न API मध्ये भिन्न सुरक्षा आवश्यकता असू शकतात. काही API ला केवळ काही पद्धती उघड करण्याची आवश्यकता असू शकते, तर इतरांना उत्पत्तीवर कठोर नियंत्रण आवश्यक असू शकते. येथेच प्रत्येक एंडपॉईंटसाठी CORS कॉन्फिगरेशन फाइन-ट्यूनिंग महत्वाचे बनते. योग्य CORS व्यवस्थापन देखील अनावश्यक प्रीफ्लाइट विनंत्या कमी करून आणि सहज वापरकर्ता परस्परसंवाद सुनिश्चित करून API कार्यप्रदर्शन ऑप्टिमाइझ करण्यात मदत करते.