Spring Boot和Vue.js是目前非常流行的Java Web框架和前端JavaScript框架。它們都各自擁有許多優(yōu)秀的特性,但是由于安全性和跨域資源共享(CORS)問題的出現(xiàn),它們之間的交互工作會變得更加復(fù)雜。
CORS是一種瀏覽器安全策略,在瀏覽器端防止Web應(yīng)用程序跨域訪問數(shù)據(jù)資源。Spring Boot提供了CorsFilter類來處理跨域請求。然而,Vue.js的前端開發(fā)者也需要為此作出一些調(diào)整。下面是如何通過Spring Boot和Vue.js實(shí)現(xiàn)跨域請求的基本設(shè)置:
@Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }
上述代碼段中,我們在Spring Boot中注冊一個CorsFilter的類,通過源URL基于CorsConfiguration,并設(shè)置允許訪問的來源、請求方法、請求頭。其中“*”代表允許所有請求。
axios.defaults.baseURL = 'http://localhost:8080'; Vue.prototype.$http = axios;
在Vue.js代碼中,我們需要為axios賦予指向后端的地址,并通過Vue.prototype屬性擴(kuò)展它。這將確保后端RESTful API的正確調(diào)用,解決了CORS的問題。
綜上所述,通過Spring Boot和Vue.js的組合,我們可以解決CORS問題,并使得兩者能夠更好的實(shí)現(xiàn)數(shù)據(jù)互通。