Bazı nedenlerden dolayı, bu basit sorun birçok geliştiriciyi engelliyor. Bu basit şeyle saatlerce uğraştım. Bu problem birçok boyutta:
- CORS (farklı etki alanlarında ve bağlantı noktalarında bir ön uç ve arka uç kullanıyorsanız.
- Arka Uç CORS Yapılandırması
- Axios'un temel kimlik doğrulama yapılandırması
CORS
Geliştirme için kurulumum localhost: 8081 üzerinde çalışan bir vuejs webpack uygulaması ve localhost: 8080 üzerinde çalışan bir spring boot uygulaması ile. Bu nedenle, ön uçtan rest API'sini çağırmaya çalışırken, tarayıcının uygun CORS ayarları olmadan yay arka uçtan bir yanıt almama izin vermesi mümkün değil. CORS, modern tarayıcıların sahip olduğu Alanlar Arası Komut Dosyası (XSS) korumasını gevşetmek için kullanılabilir. Bunu anladığım kadarıyla, tarayıcılar SPA'nızı bir XSS saldırısı olmaktan koruyor. Elbette, StackOverflow'daki bazı yanıtlar, XSS korumasını devre dışı bırakmak için bir krom eklentisi eklemeyi önerdi, ancak bu gerçekten işe yarıyor VE eğer öyleyse, kaçınılmaz sorunu daha sonra zorlayacaktı.
Arka uç CORS yapılandırması
İlkbahar önyükleme uygulamanızda CORS'u şu şekilde kurmanız gerekir:
İstemci isteğine yanıt olarak uygun üstbilgiler eklemek için bir CorsFilter sınıfı ekleyin. Access-Control-Allow-Origin ve Access-Control-Allow-Headers, temel kimlik doğrulama için sahip olunması gereken en önemli şeydir.
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);
}
...
}
Spring WebSecurityConfigurationAdapter'ı genişleten bir yapılandırma sınıfı ekleyin. Bu sınıfta CORS filtrenizi enjekte edeceksiniz:
@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());
}
...
}
Denetleyicinize CORS ile ilgili herhangi bir şey koymanıza gerek yoktur.
Başlangıç aşaması
Şimdi, ön uçta, Yetkilendirme başlığıyla axios sorgunuzu oluşturmanız gerekir:
<!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>
Bu yardımcı olur umarım.