SpringBoot前后端分離解決跨域問題的3種解決方案總結
??什么是跨域
想要知道什么是跨域的話,我們可以通過一個小案例簡單了解一下跨域的概念:在項目代碼編寫的時候,我們將前端項目代碼和后端的項目代碼相分離開,一個運行在本地的8080端口一個運行在本地的8888端口,這也就是我們常說的前后端分離項目?,F(xiàn)在使用前端的請求去調(diào)用后端的接口,就會產(chǎn)生以下的錯誤
Access to XMLHttpRequest at 'http://localhost:8888/請求名'
from origin ‘http://localhost:8080’ has been blocked by
CORS policy: No ‘Access-Control-Allow-Origin’
header is present on the request resource.
錯誤原因:基于瀏覽器的保護機制,當請求中缺少了一些http頭信息時,讀取響應的操作就會被阻止。出現(xiàn)這個問題并不是說后端沒有接收到前端發(fā)送過來的請求,相反后端接收請求并且將響應信息返回給了前端,但是返回的響應信息被前端瀏覽器所攔截了。
這個保護機制就是瀏覽器的一種重要的安全策略——同源策略,該策略可以限制不同源之間的交互行為,從而有效避免一些瀏覽器層面的攻擊。所謂的同源就是指url中的協(xié)議、域名、端口三個都相同。反觀案例的url前端http://localhost:8080請求http://localhost:8888/請求名,協(xié)議和域名都相等但是端口卻不一樣導致兩個是不同源,不同源的話就會產(chǎn)生跨域問題。
??跨域問題的解決策略
CROS(Cross Origin Resource Sharing)策略,全稱為跨域資源共享策略,是后端用來解決跨域問題的一個方案(當然前端也有解決跨域問題的對應方案),拋開底層具體的解決原理不說,今天就學習一下如何借助該策略實現(xiàn)跨域問題的解決。
??三種解決方法
第一種也是最簡單但不常用的一種,只需要在后端接口方法上添加 @CrossOrigin 注解,即可解決對這個接口方法的請求跨域問題,但是在實際開發(fā)中一般都會有很多的方法,在每一個方法上都添加這個注解的話明顯就會很影響使用感受。當然還可以將注解添加到類上,表示類中的所有方法都解決了跨域問題,但是類也不止一個還是麻煩。
@CrossOrigin @GetMapping("/請求名") public String sayHello() { return "hello world !"; }
第二種就是使用過濾器統(tǒng)一處理
// 對比著看,包千萬別導錯了 import org.springframework.context.annotation.Bean; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration corsConfiguration = new CorsConfiguration(); // 使用通配符* 允許所有的域請求 corsConfiguration.addAllowedOrigin("*"); // 使用通配符* 允許所有請求頭字段 corsConfiguration.addAllowedHeader("*"); // 使用通配符* 允許所有請求頭方法類型 corsConfiguration.addAllowedMethod("*"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); // 處理請求映射 source.registerCorsConfiguration("/**", corsConfiguration); return new CorsFilter(source); } }
第三種就是使用WebMvc的配置類
// 對比著看,包千萬別導錯了 import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 設置映射 .allowedOriginPatterns("*") // 設置域 .allowedMethods("*") // 設置請求的方式GET、POST等 .allowCredentials(true) // 設置是否攜帶cookie .maxAge(3600) // 設置設置的有效期 秒單位 .allowedHeaders("*"); // 設置頭 } }
總結
到此這篇關于SpringBoot前后端分離解決跨域問題的3種解決方案的文章就介紹到這了,更多相關SpringBoot前后端分離跨域問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
mybatis-plus動態(tài)表名實現(xiàn)方法
本文主要介紹了mybatis-plus動態(tài)表名實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02SpringBoot項目配置postgresql數(shù)據(jù)庫完整步驟(配置多數(shù)據(jù)源)
PostgreSQL是一種特性非常齊全的自由軟件的對象-關系型數(shù)據(jù)庫管理系統(tǒng)(ORDBMS),下面這篇文章主要給大家介紹了關于SpringBoot項目配置postgresql數(shù)據(jù)庫(配置多數(shù)據(jù)源)的相關資料,需要的朋友可以參考下2023-05-05Spring JPA聯(lián)表查詢之OneToOne源碼詳解
這篇文章主要為大家介紹了Spring JPA聯(lián)表查詢之OneToOne源碼詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04mybatis if test判斷BigDecimal遇到的坑及解決
這篇文章主要介紹了mybatis if test判斷BigDecimal遇到的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03