通過過濾器實現前後端分離的跨域問題

創建過濾器解決跨域問題

（就是前後端在不同伺服器上運行）註意：局部和全局只能選擇一種！！！
本文只講述瞭解決跨域問題的方法，不提供源碼講解。

開啟跨域配置

如果使用了springsecurity則需要在securityconfig中添加 .cors()

全局開啟：

SecurityConfig:(隨便一個config都行，這裡就先放在securityconfig里)

@Bean
public CorsFilter corsFilter() {
    //創建CorsConfiguration對象後添加配置
    CorsConfiguration config = new CorsConfiguration();
    //設置放行哪些原始域，這裡直接設置為所有
    config.addAllowedOriginPattern("*");
  	//你可以單獨設置放行哪些原始域 config.addAllowedOrigin("http://localhost:2222");
    //放行哪些原始請求頭部信息
    config.addAllowedHeader("*");
    //放行哪些請求方式，*代表所有
    config.addAllowedMethod("*");
    //是否允許發送Cookie，必須要開啟，因為我們的JSESSIONID需要在Cookie中攜帶
    config.setAllowCredentials(true);
    //映射路徑
    UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
    corsConfigurationSource.registerCorsConfiguration("/**", config);
    //返回CorsFilter
    return new CorsFilter(corsConfigurationSource);
}

局部開啟：在controller類上加註解@CrossOrigin（ 可以詳細看註解裡面的設置

@CrossOrigin
@RestController
@RequestMapping("/api/user")
public class AccountApiController {


}

設置前端發送的請求攜帶cookie

如果是自己寫的前端需要在發送每個請求的時候帶cookie信息（自定義請求，開啟get、post請求時帶cookie）

function get(url,data, success){
    $.ajax({
        type: "get",
        url: url,
        data:data,
        async: true,
        dataType: 'json',
        xhrFields: {
            withCredentials: true	//開啟攜帶cookie信息，用於security識別用戶是否登錄
        },
        success: success
    });
}


function post(url, data, success){
    $.ajax({
        type: "post",
        url: url,
        async: true,
        data: data,
        dataType: 'json',
        xhrFields: {
            withCredentials: true 
        },
        success: success
    });
}

//舉例：
function initUserInfo() {
    get('http://localhost:8080/api/user/info', {},function (data) {     //這裡要加{}，告訴data是空，否則會吧後面的當作data
        if (data.code === 200) {
            alert("登錄成功,歡迎" + data.data.username + "進入圖書管理系統！")

        } else {
            alert(data.reason)
            window.location = "http://localhost:8080/login.html"
        }
    })
}