কিছু কারণে, এই সাধারণ সমস্যাটি অনেক বিকাশকারীকে অবরুদ্ধ করে চলেছে। আমি এই সাধারণ জিনিসটি নিয়ে বহু ঘন্টা লড়াই করেছি। এই সমস্যাটি অনেক মাত্রা হিসাবে:
- কর্স (যদি আপনি বিভিন্ন ডোমেন এবং পোর্টগুলিতে ফ্রন্টএন্ড এবং ব্যাকএন্ড ব্যবহার করেন।
- ব্যাকএন্ড CORS কনফিগারেশন
- অক্ষের প্রাথমিক প্রমাণীকরণ কনফিগারেশন
কর্স
উন্নয়নের জন্য আমার সেটআপটি লোকহোস্ট: 8081 এবং একটি স্প্রিং বুট অ্যাপ্লিকেশন চলমান লোকহোস্ট: 8080 এ চলছে এমন একটি ভয়েজ ওয়েবপ্যাক অ্যাপ্লিকেশন সহ। সুতরাং সীমান্ত থেকে রেস্ট এপিআই কল করার চেষ্টা করার সময়, ব্রাউজার আমাকে উপযুক্ত সিওআরএস সেটিংস ছাড়াই বসন্ত ব্যাকএন্ডের কাছ থেকে প্রতিক্রিয়া পেতে দেয় এমন কোনও উপায় নেই। আধুনিক ব্রাউজারগুলির ক্রস ডোমেন স্ক্রিপ্ট (এক্সএসএস) সুরক্ষা শিথিল করতে CORS ব্যবহার করা যেতে পারে। আমি যেমন এটি বুঝতে পারি, ব্রাউজারগুলি আপনার এসপিএকে কোনও এক্সএসএসের আক্রমণ থেকে রক্ষা করছে। অবশ্যই, স্ট্যাকওভারফ্লোতে কিছু উত্তর এক্সএসএস সুরক্ষা অক্ষম করার জন্য একটি ক্রোম প্লাগইন যুক্ত করার পরামর্শ দিয়েছে তবে এটি সত্যিই কাজ করে এবং যদি এটি হয় তবে কেবল পরবর্তী সময়ের জন্য অনিবার্য সমস্যাটিকে ধাক্কা দেবে।
ব্যাকএন্ড CORS কনফিগারেশন
আপনার বসন্ত বুট অ্যাপে আপনার কীভাবে সিওআর সেটআপ করা উচিত তা এখানে:
ক্লায়েন্টের অনুরোধের প্রতিক্রিয়ায় যথাযথ শিরোনাম যুক্ত করতে একটি কর্স ফিল্টার শ্রেণি যুক্ত করুন। অ্যাসেস-কন্ট্রোল-মঞ্জুরি-উত্স এবং অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-শিরোনামগুলি মৌলিক প্রমাণীকরণের জন্য সবচেয়ে গুরুত্বপূর্ণ বিষয়।
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);
}
...
}
একটি কনফিগারেশন ক্লাস যুক্ত করুন যা স্প্রিং ওয়েবসিকিউরিটি কনফিগারেশনএডাপ্টার প্রসারিত করে। এই শ্রেণিতে আপনি আপনার সিওআরএস ফিল্টারটি ইনজেক্ট করবেন:
@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>
আশাকরি এটা সাহায্য করবে.