🚀🚀扎哇太棗糕的博客首頁🚀🚀**

文章目錄

• 🍊什么是跨域
• 🍊跨域問題的解決策略
• 🍊三種解決方法

🍊什么是跨域

??想要知道什么是跨域的話，我們可以通過一個小案例簡單了解一下跨域的概念：在項目代碼編寫的時候，我們將前端項目代碼和后端的項目代碼相分離開，一個運行在本地的8080端口一個運行在本地的8888端口，這也就是我們常說的前后端分離項目。現在使用前端的請求去調用后端的接口，就會產生以下的錯誤

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頭信息時，讀取響應的操作就會被阻止。出現這個問題并不是說后端沒有接收到前端發送過來的請求，相反后端接收請求并且將響應信息返回給了前端，但是返回的響應信息被前端瀏覽器所攔截了。
??這個保護機制就是瀏覽器的一種重要的安全策略——同源策略，該策略可以限制不同源之間的交互行為，從而有效避免一些瀏覽器層面的攻擊。所謂的同源就是指url中的協議、域名、端口三個都相同。反觀案例的url前端http://localhost:8080請求http://localhost:8888/請求名，協議和域名都相等但是端口卻不一樣導致兩個是不同源，不同源的話就會產生跨域問題。

🍊跨域問題的解決策略

??CROS(Cross Origin Resource Sharing)策略，全稱為跨域資源共享策略，是后端用來解決跨域問題的一個方案(當然前端也有解決跨域問題的對應方案)，拋開底層具體的解決原理不說，今天就學習一下如何借助該策略實現跨域問題的解決。

🍊三種解決方法

??第一種也是最簡單但不常用的一種，只需要在后端接口方法上添加 @CrossOrigin 注解，即可解決對這個接口方法的請求跨域問題，但是在實際開發中一般都會有很多的方法，在每一個方法上都添加這個注解的話明顯就會很影響使用感受。當然還可以將注解添加到類上，表示類中的所有方法都解決了跨域問題，但是類也不止一個還是麻煩。

@CrossOrigin @GetMapping("/請求名") public String sayHello() {return "hello world !"; }

第二種就是使用過濾器統一處理

// 對比著看，包千萬別導錯了 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 {@Beanpublic 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 {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 設置映射.allowedOriginPatterns("*") // 設置域.allowedMethods("*") // 設置請求的方式GET、POST等.allowCredentials(true) // 設置是否攜帶cookie.maxAge(3600) // 設置設置的有效期 秒單位.allowedHeaders("*"); // 設置頭} }

總結

以上是生活随笔為你收集整理的多学一招总没错吧？SpringBoot解决前后端分离的跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。