रिएक्ट और स्प्रिंग बूट CORS समस्याओं को ठीक करना: GET अनुरोध को अवरुद्ध किया गया

स्प्रिंग बूट और रिएक्ट ऐप्स में CORS त्रुटियों को समझना

वेब एप्लिकेशन विकसित करते समय इसका उपयोग करें प्रतिक्रिया फ्रंटएंड के लिए और स्प्रिंग बूट बैकएंड के लिए, डेवलपर्स के सामने आने वाली एक आम समस्या कुख्यात CORS त्रुटि है। यह त्रुटि तब होती है जब ब्राउज़र सुरक्षा कारणों से किसी अनुरोध को ब्लॉक कर देता है, खासकर जब किसी भिन्न पोर्ट या डोमेन पर होस्ट की गई बैकएंड सेवा से कनेक्ट करने का प्रयास किया जाता है। इस मामले में, आप बनाते समय CORS समस्या से निपट रहे हैं अनुरोध प्राप्त करें रिएक्ट से स्प्रिंग बूट एपीआई तक।

त्रुटि संदेश आमतौर पर इंगित करता है कि ब्राउज़र आपके अनुरोध को अवरुद्ध कर रहा है क्योंकि पहुंच-नियंत्रण-अनुमति-उत्पत्ति हेडर या तो गायब है या गलत तरीके से कॉन्फ़िगर किया गया है। यह ध्यान देने योग्य है कि उपकरण पसंद करते हैं डाकिया इन सुरक्षा प्रतिबंधों को लागू न करें, यही कारण है कि आपका अनुरोध पोस्टमैन में पूरी तरह से काम कर सकता है लेकिन ब्राउज़र में विफल हो सकता है।

आपके परिदृश्य में, त्रुटि संदेश इंगित करता है कि प्रीफ़्लाइट अनुरोध एक्सेस नियंत्रण जांच को पास नहीं करता है। यह आम तौर पर तब होता है जब सर्वर की CORS नीति में कुछ हेडर या विधियों की अनुमति नहीं होती है या उन्हें ठीक से कॉन्फ़िगर नहीं किया जाता है। जबकि CORS कॉन्फ़िगरेशन सर्वर साइड पर मौजूद प्रतीत होता है, यह ब्राउज़र अनुरोधों को कैसे संभालता है, इसमें विशिष्ट समस्याएं हो सकती हैं।

यह लेख आपको समस्या के मूल कारण को समझने में मदद करेगा और इसे हल करने के संभावित समाधानों के माध्यम से आपका मार्गदर्शन करेगा सीओआरएस त्रुटि आपके रिएक्ट और स्प्रिंग बूट एप्लिकेशन में।

रिएक्ट और स्प्रिंग बूट अनुप्रयोगों में CORS त्रुटियों को संभालना

ऊपर दी गई स्क्रिप्ट का उद्देश्य समस्या का समाधान करना है सीओआरएस त्रुटियाँ रिएक्ट फ्रंटएंड और स्प्रिंग बूट बैकएंड सेटअप में। त्रुटि तब होती है जब 'http://localhost:8081' पर होस्ट किया गया फ्रंटएंड, 'http://localhost:8080' पर होस्ट किए गए स्प्रिंग बूट एपीआई के लिए GET अनुरोध करने का प्रयास करता है। अनधिकृत क्रॉस-ऑरिजिन अनुरोधों को रोकने के लिए ब्राउज़र सख्त सुरक्षा नियम लागू करते हैं, यही कारण है कि ये CORS नीतियां मौजूद हैं। WebMvcकॉन्फ़िगरर स्प्रिंग बूट बैकएंड कॉन्फ़िगरेशन में क्लास CORS नियमों को परिभाषित करने में मदद करती है जो विशिष्ट उत्पत्ति और विधियों की अनुमति देती है, अंततः समस्या का समाधान करती है।

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

फ्रंटएंड पर, रिएक्ट का उपयोग करके अनुरोधों को संभालता है एक्सियोस, एक लोकप्रिय HTTP क्लाइंट। `ProjectPage.tsx` फ़ाइल के `fetchData` फ़ंक्शन में, `axios.get()` फ़ंक्शन स्प्रिंग बूट बैकएंड को एक GET अनुरोध भेजता है। `withCredentials` विकल्प को सत्य पर सेट किया गया है, जिससे कुकीज़ और प्रमाणीकरण क्रेडेंशियल अनुरोध के साथ भेजे जा सकते हैं। इसके अतिरिक्त, प्राधिकरण हेडर को उपयोगकर्ता के टोकन को पास करने के लिए शामिल किया गया है, यह सुनिश्चित करते हुए कि अनुरोध ठीक से प्रमाणित है। इन कॉन्फ़िगरेशन के बिना, ब्राउज़र सुरक्षा कारणों से अनुरोध को ब्लॉक कर देगा।

अंत में, यूनिट परीक्षण फ़ाइल, `CorsTest.java`, सत्यापित करती है कि CORS कॉन्फ़िगरेशन अपेक्षा के अनुरूप काम कर रहा है। यह परीक्षण बैकएंड एपीआई के लिए एक 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);
   }
}

// 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 (क्रॉस-ओरिजिनल रिसोर्स शेयरिंग) आधुनिक वेब अनुप्रयोगों में, इसके पीछे के सुरक्षा निहितार्थ को समझना महत्वपूर्ण है। दुर्भावनापूर्ण वेबसाइटों को उपयोगकर्ताओं की ओर से अनधिकृत एपीआई अनुरोध करने से रोकने के लिए ब्राउज़रों द्वारा CORS को एक सुरक्षा उपाय के रूप में लागू किया गया है। यह उन परिदृश्यों में विशेष रूप से महत्वपूर्ण है जहां प्रमाणीकरण टोकन और उपयोगकर्ता क्रेडेंशियल्स जैसे फ्रंटएंड और बैकएंड सेवाओं के बीच संवेदनशील डेटा का आदान-प्रदान किया जाता है। स्प्रिंग बूट बैकएंड में सीओआरएस स्थापित करते समय, केवल विश्वसनीय स्रोतों को संरक्षित संसाधनों तक पहुंचने की अनुमति देना आवश्यक है, जिससे सुरक्षा कॉन्फ़िगरेशन सिस्टम के आर्किटेक्चर का एक प्रमुख तत्व बन जाता है।

एक अन्य महत्वपूर्ण पहलू प्रीफ़्लाइट अनुरोधों को संभालना है, जो वास्तविक GET या POST अनुरोध से पहले ब्राउज़र द्वारा किए गए स्वचालित अनुरोध हैं। ऐसा तब होता है जब क्लाइंट को यह पुष्टि करने की आवश्यकता होती है कि क्या सर्वर क्रॉस-ऑरिजिन अनुरोधों की अनुमति देता है और विशिष्ट हेडर या विधियों का समर्थन करता है। कुछ मामलों में, इन्हें संभालने में गलत कॉन्फ़िगरेशन उड़ान पूर्व अनुरोध समस्याएँ पैदा कर सकता है, जिसके परिणामस्वरूप CORS त्रुटियाँ हो सकती हैं, भले ही वास्तविक अनुरोध पोस्टमैन जैसे टूल में ठीक काम करता हो। स्प्रिंग बूट के `कॉर्सरजिस्ट्री` को सही हेडर और विधियों के साथ कॉन्फ़िगर करना यह सुनिश्चित करता है कि प्रीफ़्लाइट अनुरोधों को सही ढंग से संसाधित किया जाता है, जिससे फ्रंटएंड और बैकएंड के बीच सहज बातचीत की अनुमति मिलती है।

इसके अलावा, CORS हैंडलिंग स्थिर या एक-आकार-सभी के लिए फिट नहीं होनी चाहिए। माइक्रोसर्विसेज से प्रबंधित जैसे गतिशील वातावरण में, अलग-अलग एपीआई की अलग-अलग सुरक्षा आवश्यकताएं हो सकती हैं। कुछ एपीआई को केवल कुछ तरीकों को उजागर करने की आवश्यकता हो सकती है, जबकि अन्य को उत्पत्ति पर सख्त नियंत्रण की आवश्यकता हो सकती है। यहीं पर प्रत्येक समापन बिंदु के लिए CORS कॉन्फ़िगरेशन को ठीक करना महत्वपूर्ण हो जाता है। उचित सीओआरएस प्रबंधन अनावश्यक प्रीफ़्लाइट अनुरोधों को कम करके और सुचारू उपयोगकर्ता इंटरैक्शन सुनिश्चित करके एपीआई प्रदर्शन को अनुकूलित करने में भी मदद करता है।