Spring boot 和Vue開發(fā)中CORS跨域問題解決
跨域資源共享CORS(Cross-origin Resource Sharing),是W3C的一個標準,允許瀏覽器向跨源的服務器發(fā)起XMLHttpRequest請求,克服ajax請求只能同源使用的限制。關于CORS的詳細解讀,可參考阮一峰大神的博客:跨域資源共享CORS詳解。
1. 遇到的問題:
我用spring-boot 做Rest服務,Vue做前端框架,用了element-admin-ui這個框架做后臺管理。在調試的過程中遇到了如下錯誤:
Preflight response is not successful
2. 分析問題
這個問題是典型的CORS跨域問題。
所謂跨域:
跨域,指的是瀏覽器不能執(zhí)行其他網站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript施加的安全限制。
3. 解決方法
在項目中添加類CustomCORSConfiguration 代碼如下:
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; /** * @author spartajet * @description * @create 2018-05-15 下午5:00 * @email spartajet.guo@gmail.com */ @Configuration public class CustomCORSConfiguration { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.setAllowCredentials(true); return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source); } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用
這篇文章主要介紹了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以參考下2018-04-04vue項目如何使用three.js實現vr360度全景圖片預覽
這篇文章主要介紹了vue項目如何使用three.js實現vr360度全景圖片預覽,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03解決vue.js中settimeout遇到的問題(時間參數短效果不穩(wěn)定)
這篇文章主要介紹了解決vue.js中settimeout遇到的問題(時間參數短效果不穩(wěn)定),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07