[[337604]]

跨域問題

現(xiàn)在絕大多數(shù)公司的項目都是前后端分離的，前后端分離后勢必會遇到跨域問題。如下圖

 

繼續(xù)debug發(fā)現(xiàn)，reponse為undefined，提示消息為Network Error。

 

所以當(dāng)你和前端聯(lián)調(diào)的時候一直請求失敗，報網(wǎng)絡(luò)錯誤，一般情況下是后端沒有做跨域配置。

注意此時并不是后端沒有收到請求，而是收到請求了，也返回結(jié)果了，但是瀏覽器將結(jié)果攔截了，并且報錯。

 

同源策略

那么瀏覽器為什么會報錯呢?

因為瀏覽器基于安全考慮而引入的同源策略

 

當(dāng)協(xié)議+域名+端口三者都相同時，才不會產(chǎn)生跨域問題，即同源。此時才能讀取到服務(wù)端的響應(yīng)

當(dāng)前url	請求url	是否跨域
https://www.javashitang.com	http://www.javashitang.com	是，協(xié)議不同
https://www.javashitang.com	http://book.javashitang.com	是，域名不同
https://www.javashitang.com	http://www.javashitang.com:8000	是，端口不同

為什么要有同源策略呢?

當(dāng)然是為了安全起見，舉個例子，以銀行轉(zhuǎn)賬為例，看看你的錢是怎么沒的

 

這就是著名的CSRF攻擊(跨站請求偽造，當(dāng)然還有很多其他方式)，還有如果第5步不對請求的來源進(jìn)行校驗，那么你的錢已經(jīng)被轉(zhuǎn)走了

html頁面中的如下三個標(biāo)簽是允許跨域加載資源的

 <img src=XXX> 
 
<link href=XXX> 
 
<script src=XXX> 

如何解決跨域

雖然同源策略保證了安全，但一些合理的用途也會受到影響。解決跨域的方式有很多種，簡單介紹2個

JSONP

JSONP主要是利用<script>標(biāo)簽將請求發(fā)送出去，來實現(xiàn)數(shù)據(jù)的加載，但這種方式有一個缺點(diǎn)，即只能支持GET請求，其他請求都不能支持，因為JSONP這種方式已經(jīng)很少使用了，所以不做過多的介紹

CROS

非簡單請求

在正式的跨域請求前，發(fā)送一個OPTIONS請求去詢問服務(wù)器是否接受接下來的跨域請求，攜帶如下header

Origin：發(fā)起請求原來的域

• Access-Control-Request-Method：將要發(fā)起的跨域請求方式（GET/POST/…）
• Access-Control-Request-Headers：將要發(fā)起的跨域請求中包含的請求頭字段

服務(wù)器在返回中增加如下header來表明是否允許這個跨域請求。瀏覽器收到后進(jìn)行檢查如果不符合要求則不會發(fā)起后續(xù)請求

• Access-Control-Allow-Origin：允許哪些域來訪問（*表示允許所有域的請求）
• Access-Control-Allow-Methods：允許哪些請求方式
• Access-Control-Allow-Headers：允許哪些請求頭字段
• Access-Control-Allow-Credentials：是否允許攜帶Cookie

簡單請求

每次都要發(fā)送二次請求是不是很麻煩？所以做了優(yōu)化

當(dāng)請求方法是HEAD、GET、POST

并且請求頭只有如下幾個時，被定義為簡單請求

Accept 
Accept-Language 
Content-Language 
Last-Event-ID 
Content-Type：(application/x-www-form-urlencoded、multipart/form-data、text/plain) 

簡單請求會在請求中加入Origin頭，直接發(fā)起請求，不會先詢問了。后端返回相應(yīng)的header即可

Spring支持跨域

理解了跨域的本質(zhì)，再看各種配置其實就是根據(jù)請求往reponse中增加header

利用Filter

配置如下Filter，CrossDomainFilter是對javax.servlet.Filter的封裝，本質(zhì)上是一個Filter。

可以看到我多返回了一個header，Access-Control-Max-Age，他表明了詢問結(jié)果的有效期限，即在3600s之內(nèi)瀏覽器可以不必再次詢問

@Component 
@WebFilter(filterName = "crossDomain", urlPatterns = "/*") 
public class CrossDomainFilter extends OncePerRequestFilter { 
 
    @Override 
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { 
        // 此處可以進(jìn)行白名單檢測 
        if(CorsUtils.isCorsRequest(request)) { 
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); 
            response.setHeader("Access-Control-Allow-Credentials", "true"); 
            response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers")); 
            response.setHeader("Access-Control-Allow-Methods", request.getHeader("Access-Control-Request-Method")); 
            response.setHeader("Access-Control-Max-Age", "3600"); 
        } 
        // 是個OPTIONS請求，header已設(shè)好，不用執(zhí)行后續(xù)邏輯，直接return 
        if(CorsUtils.isPreFlightRequest(request)) { 
            return; 
        } 
        filterChain.doFilter(request, response); 
    } 
} 

看一下用到的工具類

public abstract class CorsUtils { 
 
    // 請求中有 origin 這個header則返會true 
    public static boolean isCorsRequest(HttpServletRequest request) { 
        return (request.getHeader(HttpHeaders.ORIGIN) != null); 
    } 
 
    public static boolean isPreFlightRequest(HttpServletRequest request) { 
        return (isCorsRequest(request) && HttpMethod.OPTIONS.matches(request.getMethod()) && 
                request.getHeader(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD) != null); 
    } 
 
} 

利用CorsRegistry

@Configuration 
public class GlobalCorsConfig { 
 
    @Bean 
    public WebMvcConfigurer corsConfigurer() { 
        return new WebMvcConfigurer() { 
            @Override 
            public void addCorsMappings(CorsRegistry registry) { 
                // 添加映射路徑 
                registry.addMapping("/**") 
                        // 允許的域 
                        .allowedOrigins("*") 
                        // 允許攜帶cookie 
                        .allowCredentials(true) 
                        // 允許的請求方式 
                        .allowedMethods("GET","POST", "PUT", "DELETE") 
                        // 允許的請求頭 
                        .allowedHeaders("*"); 
            } 
        }; 
    } 
} 

利用@CrossOrigin注解

支持更細(xì)粒度的配置，可以用法方法上或者類上

@RestController 
@RequestMapping("resource") 
@CrossOrigin({"http://127.0.0.1:8080"}) 
public class ResourceController 

其他方式支持跨域

看到這你可能會產(chǎn)生疑問，我們的項目中沒有跨域的配置啊，怎么還能支持跨域？那估計是把設(shè)置header這些活交給網(wǎng)關(guān)層來做了。

本文轉(zhuǎn)載自微信公眾號「Java識堂」，作者Java識堂 。轉(zhuǎn)載本文請聯(lián)系Java識堂公眾號。