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