SpringBoot跨域 Jsonp和Cors

有一次個人項目中採用了先後端分離的模式，引發了跨域問題，本文將介紹我所採用的跨域解決方法。

首先要了解產生跨域的本質，也就是同源策略的限制，源是指域名、端口號、協議，有一者不相同將被瀏覽器拒絕接受響應信息，（請求能夠發送出去，可是瀏覽器不接受響應）。

解決方法：

1. jsonp

jsonp的原理的 src="" 屬性不受同源策略的限制，動態建立一個callback回調函數，服務器調用回調函數把數據放進去，具體的細節打算之後作一個專門講解。

這裏給一個模版:

$.ajax({
         type: "get",               //jsonp只能使用get
         async: false,
         url: ""
         dataType: "jsonp",
         jsonp: "callback",        
         jsonpCallback:"message",       //注意這裏給回調函數起的名字
             success: function(json){
             
            }
        })
複製代碼

若是這裏你的回調函數起名爲message，那麼你在後端返回json的時候，也要注意在最外面包一層message{}。

這裏jsonp的肯定也能夠明顯的看出，只支持get請求，緣由就是由於經過src=「」發送請求，因此能夠知道是url傳參。

那麼jsonp的好處是什麼呢，兼容性，幾乎全部瀏覽器都支持（包括一些版本比較老的），不須要XMLHttpRequest或ActiveX的支持。

2. cors

又稱跨域訪問，瀏覽器將cors請求分爲簡單請求和非簡單請求，由於本文主要講解具體的方法，因此關於細節部分有興趣能夠去看其餘博客或者我之後再作一篇具體的講解（和jsonp一塊兒）。在springboot中，官方已經提供了支持。直接貼代碼：

方式一：全局定義

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        List<String> list = new ArrayList<>();
        list.add("*");
        corsConfiguration.setAllowedOrigins(list);
        /*
        // 請求經常使用的三種配置，*表明容許全部，當時你也能夠自定義屬性
        （好比header只能帶什麼，只能是post方式等等）
        */
        corsConfiguration.addAllowedOrigin("*");    //支持的源
        corsConfiguration.addAllowedHeader("*");    //header限制
        corsConfiguration.addAllowedMethod("*");    //支持方法
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source
            = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}
複製代碼

方式二：局部定義

@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})
複製代碼

直接在須要跨域的方法上添加註解，不過我沒試過，有興趣或者有這種方式需求的朋友能夠嘗試一下。

總結：

我的推薦使用cors，若是由於兼容性問題不得不使用jsonp那也沒辦法。而後若是是先後端分離的模式下，對於用戶權限驗證這一塊也是一個須要注意點，若是使用cookie-session，跨域會致使後臺獲取不到session，咱們能夠利用token的方法來解決這個問題，我打算之後介紹一下jwt（Json web Token）來實現用戶認證。

若是文中有錯誤，但願你們能夠熱情指出。