कुछ कारणों से, यह सरल समस्या कई डेवलपर्स को रोक रही है। इस साधारण सी बात से मैं कई घंटों तक जूझता रहा। कई आयामों के रूप में यह समस्या:
- CORS (यदि आप विभिन्न डोमेन एट पोर्ट पर फ्रंटएंड और बैकएंड का उपयोग कर रहे हैं।
- बैकेंड कॉर्स कॉन्फ़िगरेशन
- कुल्हाड़ियों का मूल प्रमाणीकरण विन्यास
CORS
डेवलपमेंट के लिए मेरा सेटअप लोक्यूहोस्ट: 8081 पर चलने वाले वीयूज वेबपैक एप्लिकेशन और लोकलहोस्ट पर चलने वाले स्प्रिंग बूट एप्लिकेशन के साथ है। इसलिए जब फ्रंट एपीआई से रेस्ट एपीआई को कॉल करने की कोशिश की जाती है, तो कोई रास्ता नहीं है कि ब्राउज़र मुझे उचित कॉर्स सेटिंग्स के बिना स्प्रिंग बैकएंड से प्रतिक्रिया प्राप्त करने देगा। आधुनिक ब्राउज़र में क्रॉस डोमेन स्क्रिप्ट (XSS) सुरक्षा को आराम करने के लिए CORS का उपयोग किया जा सकता है। जैसा कि मैं यह समझता हूं, ब्राउज़र आपके एसपीए को एक XSS द्वारा हमला होने से बचा रहे हैं। बेशक, StackOverflow पर कुछ उत्तरों ने XSS सुरक्षा को अक्षम करने के लिए एक क्रोम प्लगइन जोड़ने का सुझाव दिया था, लेकिन यह वास्तव में काम करता है और यदि ऐसा था, तो यह केवल बाद के लिए अपरिहार्य समस्या को धक्का देगा।
बैकेंड कॉर्स विन्यास
यहां बताया गया है कि आपको अपने स्प्रिंग बूट ऐप में CORS को कैसे सेट करना चाहिए:
क्लाइंट अनुरोध के जवाब में उचित हेडर जोड़ने के लिए CorsFilter वर्ग जोड़ें। पहुँच-नियंत्रण-अनुमति-उत्पत्ति और पहुँच-नियंत्रण-अनुमति-हेडर्स मूल प्रमाणीकरण के लिए सबसे महत्वपूर्ण बात है।
public class CorsFilter implements Filter {
...
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
**response.setHeader("Access-Control-Allow-Headers", "authorization, Content-Type");**
response.setHeader("Access-Control-Max-Age", "3600");
filterChain.doFilter(servletRequest, servletResponse);
}
...
}
एक कॉन्फ़िगरेशन क्लास जोड़ें जो स्प्रिंग वेबसिटीरिटीऑनफिगरेशन एडॉप्टर तक फैली हो। इस वर्ग में आप अपने CORS फ़िल्टर को इंजेक्ट करेंगे:
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
...
@Bean
CorsFilter corsFilter() {
CorsFilter filter = new CorsFilter();
return filter;
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http.addFilterBefore(corsFilter(), SessionManagementFilter.class) //adds your custom CorsFilter
.csrf()
.disable()
.authorizeRequests()
.antMatchers("/api/login")
.permitAll()
.anyRequest()
.authenticated()
.and()
.httpBasic()
.authenticationEntryPoint(authenticationEntryPoint)
.and()
.authenticationProvider(getProvider());
}
...
}
आपको अपने नियंत्रक में कोर्स से संबंधित कुछ भी डालने की आवश्यकता नहीं है।
फ़्रंट एंड
अब, दृश्यपटल में आपको प्राधिकरण शीर्षक के साथ अपनी अक्षीय क्वेरी बनाने की आवश्यकता है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ status }}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
status: ''
},
created: function () {
this.getBackendResource();
},
methods: {
getBackendResource: function () {
this.status = 'Loading...';
var vm = this;
var user = "aUserName";
var pass = "aPassword";
var url = 'http://localhost:8080/api/resource';
var authorizationBasic = window.btoa(user + ':' + pass);
var config = {
"headers": {
"Authorization": "Basic " + authorizationBasic
}
};
axios.get(url, config)
.then(function (response) {
vm.status = response.data[0];
})
.catch(function (error) {
vm.status = 'An error occured.' + error;
})
}
}
})
</script>
</body>
</html>
उम्मीद है की यह मदद करेगा।