क्रॉस-ओरिजिनल अंक विवरण

आपको निम्न त्रुटि संदेश मिल सकता है:

सीओआरएस नीति द्वारा अवरुद्ध किया गया है: अनुरोधित संसाधन पर कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है

यह त्रुटि इंगित करती है कि एक निश्चित पते के अनुरोध को सीओआरएस प्रोटोकॉल द्वारा अवरुद्ध कर दिया गया है क्योंकि एक्सेस-कंट्रोल-अनुमति-उत्पत्ति हेडर संसाधन से गायब है।

क्रॉस-ऑरिजिन मुद्दों का विश्लेषण

क्रॉस-ओरिजिनल समस्याओं का मूल कारण यह है कि ब्राउज़र, सुरक्षा कारणों से, वर्तमान साइट के बाहर संसाधनों तक पहुंच को प्रतिबंधित करते हैं।

उदाहरण के लिए, एक निश्चित पृष्ठ के साथ http://127.0.0.1:8080/ पर होस्ट की गई वेबसाइट पर विचार करें। यदि आप एक ही साइट से संसाधनों तक पहुँचते हैं, तो कोई प्रतिबंध नहीं है। लेकिन यदि आप किसी भिन्न साइट (उदाहरण के लिए, http://127.0.0.1:8081) से संसाधनों तक पहुंचने का प्रयास करते हैं, तो ब्राउज़र अनुरोध को ब्लॉक कर देगा।

नोट: हम प्रोटोकॉल, डोमेन और पोर्ट को "समान मूल" को परिभाषित करने के हिस्से के रूप में मानते हैं।

स्रोत विशेषता वाले तत्व, जैसे आईएमजी और स्क्रिप्ट टैग, इस प्रतिबंध के अधीन नहीं हैं।

ऐतिहासिक रूप से, जब फ्रंट-एंड और बैक-एंड अलग-अलग नहीं थे, पेज और अनुरोध इंटरफ़ेस एक ही डोमेन और पोर्ट के अंतर्गत मौजूद थे। फिर ब्राउज़र उसी डोमेन से संसाधनों का अनुरोध करने के लिए एक डोमेन पर होस्ट किए गए पृष्ठ से अनुरोधों की अनुमति देंगे।

उदाहरण के लिए, http://127.0.0.1:8080/index.html स्वतंत्र रूप से http://127.0.0.1:8080/a/b/c/userLit का अनुरोध कर सकते हैं।

आजकल, फ्रंट-एंड और बैक-एंड अलग-अलग अनुप्रयोगों में अलग-अलग होने के कारण, इसकी अनुमति नहीं है और इससे CORS समस्याएं उत्पन्न होंगी।

उत्पत्ति और क्रॉस-उत्पत्ति क्या है?

उत्पत्ति (या स्रोत) में प्रोटोकॉल, डोमेन और पोर्ट नंबर शामिल हैं।

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

https://www.baidu.com/index.html के लिए क्रॉस-ओरिजिन तुलना पर विचार करें:

समान-उत्पत्ति नीति क्या है?

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

समान मूल नीति में शामिल हैं:

1. DOM समान-उत्पत्ति नीति: विभिन्न मूल पृष्ठों के DOM हेरफेर को रोकता है। मुख्य रूप से क्रॉस-ऑरिजिन आईफ्रेम परिदृश्यों पर लागू होता है जहां विभिन्न डोमेन के आईफ्रेम एक-दूसरे तक नहीं पहुंच सकते हैं।
2. XMLHttpRequest समान-उत्पत्ति नीति: XHR ऑब्जेक्ट का उपयोग करके विभिन्न मूल के लिए HTTP अनुरोधों को प्रतिबंधित करता है।

स्प्रिंग बूट में क्रॉस-ऑरिजिन मुद्दों को हल करना

1. CORS को संभालने के लिए एक फ़िल्टर बनाना

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

एक HTTP अनुरोध सर्वलेट और फिर इंटरसेप्टर तक पहुंचने से पहले फ़िल्टर से होकर गुजरता है। यह सुनिश्चित करने के लिए कि CORS प्रसंस्करण प्राधिकरण अवरोधन से पहले होता है, हम CORS कॉन्फ़िगरेशन को एक फ़िल्टर में रख सकते हैं।

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

2. WebMvcConfigurer में CORS को कॉन्फ़िगर करना

जबकि JSONP फ्रंट-एंड पर क्रॉस-ओरिजिन मुद्दों को संबोधित कर सकता है, यह केवल GET अनुरोधों का समर्थन करता है, जो RESTful अनुप्रयोगों में सीमित है। इसके बजाय, आप बैक-एंड पर क्रॉस-ऑरिजिन रिसोर्स शेयरिंग (सीओआरएस) के साथ क्रॉस-ऑरिजिन अनुरोधों को संभाल सकते हैं। यह समाधान स्प्रिंग बूट के लिए अद्वितीय नहीं है और इसका उपयोग पारंपरिक एसएसएम ढांचे में किया गया है। आप इसे WebMvcConfigurer इंटरफ़ेस लागू करके और addCorsMappings विधि को ओवरराइड करके कॉन्फ़िगर करते हैं।

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }
}

3. नियंत्रक में CORS को कॉन्फ़िगर करना

आप @RequestMapping एनोटेशन में @CrossOrigin एनोटेशन जोड़कर विशिष्ट नियंत्रक विधियों के लिए CORS को सक्षम कर सकते हैं। डिफ़ॉल्ट रूप से, @CrossOrigin @RequestMapping में निर्दिष्ट सभी मूल और HTTP विधियों की अनुमति देता है।

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

@CrossOrigin पैरामीटर्स को समझना：

• @CrossOrigin बिना पैरामीटर के सभी URL तक पहुंचने की अनुमति देता है।
• @CrossOrigin(origins = "http://127.0.0.1:8080") निर्दिष्ट URL तक पहुंच को प्रतिबंधित करता है।
• इस एनोटेशन का उपयोग कक्षाओं या विधियों पर किया जा सकता है।
• मूल्य या मूल विशेषता अनुमत URL निर्दिष्ट करती है।
• maxAge प्रीफ़्लाइट अनुरोध कैश के लिए सेकंड में अधिकतम आयु इंगित करता है।
• अनुमति क्रेडेंशियल इंगित करता है कि क्रेडेंशियल (कुकीज़) की अनुमति है या नहीं। डिफ़ॉल्ट ग़लत है.
• अनुमत हेडर अनुमत अनुरोध शीर्षलेख निर्दिष्ट करता है।
• विधियाँ अनुमत अनुरोध विधियों को निर्दिष्ट करती हैं, डिफ़ॉल्ट GET, POST, HEAD हैं।

कारण @CrossOrigin काम नहीं कर सकता

1. @CrossOrigin को सपोर्ट करने के लिए स्प्रिंग MVC संस्करण 4.2 या उच्चतर होना चाहिए।
2. अनुचित सर्वर प्रतिक्रिया के कारण गलत अनुरोध क्रॉस-ओरिजिनल समस्याओं के रूप में प्रकट हो सकते हैं।
3. यदि कंट्रोलर एनोटेशन के ऊपर @CrossOrigin जोड़ने से अभी भी समस्याएं आती हैं, तो एक संभावित समाधान @RequestMapping में HTTP विधियों को निर्दिष्ट करना है।

उदाहरण:

@CrossOrigin
@RestController
public class PersonController {

    @RequestMapping(method = RequestMethod.GET)
    public String add() {
        // some code
    }
}