往期推薦
SpringBoot系列(一)idea新建Springboot項目css
SpringBoot系列(四)web靜態資源配置詳解jquery
SpringBoot系列(五)Mybatis整合完整詳細版ios
SpringBoot系列(六)集成thymeleaf詳解版web
Springboot系列(七) 集成接口文檔swagger,使用,測試ajax
** 目錄 **spring
跨域是什麼?api
跨域是指不一樣域名之間的相互訪問,這是由瀏覽器的同源策略決定的,是瀏覽器對JavaScript施加的安全措施,防止惡意文件破壞。跨域
同源策略:同源策略是一種約定,它是瀏覽器最核心的也是最基本的安全策略,若是缺乏了同源策略,則瀏覽器的正常功能可能會受到影響。
所謂同源就是說協議 ,域名,端口號徹底一致,有一個不一致就會形成跨域問題。
跨域原理:
URL :統一資源定位符,它是www的統一資源定位標誌,也就是咱們說的網絡地址。它的通常格式爲:協議類型://服務器地址:端口號/路徑。
這也就是咱們說的跨域中的域。
跨域技術CORS:
CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。它容許瀏覽器向跨源服務器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
SpringBoot 就對Cross 作了很好的支持。目前有三種跨域方式。
//@CrossOrigin 表示全部的URL都可訪問此資源 @CrossOrigin(origins = "http://127.0.0.1:8093")//表示只容許這一個url能夠跨域訪問這個controller @RestController @RequestMapping("/testCorss") public class CorssOriginController { //能夠對方法運用該註解 //@CrossOrigin(origins = "http://127.0.0.1:8093") @GetMapping("/getString") public String getString(){ return "跨域成功!"; } }
代碼說明:@CrossOrigin這個註解用起來很方便,這個能夠用在方法上,也能夠用在類上。若是你不設置他的value屬性,或者是origins屬性,就默認是能夠容許全部的URL/域訪問。
- value屬性能夠設置多個URL。
- origins屬性也能夠設置多個URL。
- maxAge屬性指定了準備響應前的緩存持續的最大時間。就是探測請求的有效期。
- allowCredentials屬性表示用戶是否能夠發送、處理 cookie。默認爲false
- allowedHeaders 屬性表示容許的請求頭部有哪些。
- methods 屬性表示容許請求的方法,默認get,post,head。
/** * @author 全棧學習筆記 * @date 2020/4/21 12:04 * @description */ public class MyWebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/testCross/**") .allowedHeaders("*") .allowedMethods("*") .allowCredentials(true) .allowedOrigins("http://localhost:8093") .maxAge(2000); } }
這個沒什麼好說的,就重寫addCorsMappings方法就行,配置好參數,參數和上面的註解的參數相似。這個配置屬於全局配置,配置好了所有的接口都遵循此規則。上面的註解方式只對類或者方法生效。addMaping是設置對那種格式的URL生效,也就是跟在URL後面的路徑。
import org.springframework.boot.web.servlet.FilterRegistrationBean; 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 全棧學習筆記 * @date 2020/4/21 12:49 * @description */ @Configuration public class Filter { @Bean public FilterRegistrationBean corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("http://localhost:8093");//*表示容許全部 config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); // CORS 配置對全部接口都有效 FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source)); bean.setOrder(0); return bean; } }
利用過濾器配置實現跨域,還有另一種方法
package com.example.democrossorigin.config; import org.springframework.context.annotation.Configuration; import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.FilterConfig; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Configuration public class CorssFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res = (HttpServletResponse) response; res.addHeader("Access-Control-Allow-Credentials", "true"); res.addHeader("Access-Control-Allow-Origin", "http://localhost:8093"); res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN"); chain.doFilter(request, response); } @Override public void destroy() { } @Override public void init(FilterConfig filterConfig) throws ServletException { } }
咱們在新建一個SpringBoot web項目,而後在resources 文件夾裏面的static 新建一個index.html
代碼以下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body> <div id="test"></div> <input type="button" value="測試數據" onclick="getString()"/> </body> <script> function getString() { $.ajax({ url:'http://localhost:8092/testCorss/getString', type:'get', data:{}, success:function (msg) { $("#test").html(msg); } }) } </script> </html>
咱們模擬一個ajax請求,來請求咱們的8092端口,運行新的項目結果
點擊測試,發起請求
成功從一個項目裏面拿到了另一個項目的數據,就說明咱們的跨域是成功了的。
本文講述了跨域的產生緣由,原理,以及同源策略的概念,而後介紹了在SpringBoot解決跨域的三種方式,分別是利用CrossOrgin註解,全局配置Mvc,而後就是利用過濾器配置,過濾器有兩種方式,有一種是利用servlet的過濾器實現。若是你以爲本文有用的話!點個贊也不錯哦!你的贊是對我最大的鼓勵和支持。