Spring Boot 2.X 如何優雅的解決跨域問題？
一、什麽是源和跨域
源（origin）就是協議、域名和端口號。
URL由協議、域名、端口和路徑組成，如果兩個URL的協議、域名和端口全部相同，則表示他們同源。否則，只要協議、域名、端口有任何一個不同，就是跨域。
對https://www.baidu.com/index.html進行跨域比較：
| URL | 是否跨域 | 原因 |
|---|---|---|
| https://www.baidu.com/more/index.html | 不跨域 | 三要素相同 |
| https://map.baidu.com/ | 跨域 | 域名不同 |
| http://www.baidu.com/index.html | 跨域 | 協議不同 |
| https://www.baidu.com:81/index.html | 跨域 | 端口號不同 |
二、什麽是同源策略？
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。
同源策略又分為以下兩種：
- DOM同源策略：禁止對不同源頁面DOM 進行操作。這裏主要場景是iframe跨域的情況，不同域名的iframe是限制互相訪問的。
- XMLHttpRequest同源策略：禁止使用XHR對象向不同源的服務器地址發起HTTP請求。
三、Spring Boot跨域解決方案
本例使用Spring Boot 2.1.2.RELEASE演示，分別用8080和8081端口啟動，部分代碼如下：
跨域頁面：testOtherDomain.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不同域名-Java碎碎念</title> </head> <body> <button id="b1">點我測試</button> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $("#b1").click(function () { $.ajax({ url: "http://localhost:8081/hello", type: "post", success:function (res) { console.log(res); } }) }); </script> </body> </html>
接口類：HelloController
package com.example.helloSpringBoot.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class HelloController { @RequestMapping("/hello") public String HelloSpring (){ return "hello Java碎碎念！"; } }
未解決跨域前運行截圖：
在Spring Boot 2.X應用程序中可以使用註解@CrossOrigin，也可以通過使用WebMvcConfigurer對象來定義全局CORS配置。
- @CrossOrigin註解示例代碼
package com.example.helloSpringBoot.controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class HelloController { @CrossOrigin @RequestMapping("/hello") public String HelloSpring (){ return "hello Java碎碎念！"; } }
2. WebMvcConfigurer對象示例代碼
package com.example.helloSpringBoot.config; import org.springframework.context.annotation.Bean; 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 MyConfiguration { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/*") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET", "POST", "DELETE", "PUT","PATCH") .maxAge(3600); } }; } }
按照上面兩種方式的一種配置完成後，即可實現對跨域的支持，運行成功截圖如下：
完整源碼地址：https://github.com/suisui2019/helloSpringBoot
推薦閱讀
1.Redis Cluster搭建高可用Redis服務器集群
2.為什麽單線程的Redis這麽快？
3.Spring Boot集成spring session實現session共享
4.Spring Boot入門-快速搭建web項目
5.Spring Boot2.0整合Redis
6.一篇文章搞定SpringMVC參數綁定
限時領取免費Java相關資料，涵蓋了Java、Redis、MongoDB、MySQL、Zookeeper、Spring Cloud、Dubbo/Kafka、Hadoop、Hbase、Flink等高並發分布式、大數據、機器學習等技術。
關註下方公眾號即可免費領取：
Spring Boot 2.X 如何優雅的解決跨域問題？