Spring Boot2 系列教程(十四)CORS 解決跨域問題

今天和小夥伴們來聊一聊經過CORS解決跨域問題。

同源策略

不少人對跨域有一種誤解，覺得這是前端的事，和後端不要緊，其實不是這樣的，說到跨域，就不得不說說瀏覽器的同源策略。

同源策略是由 Netscape 提出的一個著名的安全策略，它是瀏覽器最核心也最基本的安全功能，如今全部支持 JavaScript 的瀏覽器都會使用這個策略。所謂同源是指協議、域名以及端口要相同。同源策略是基於安全方面的考慮提出來的，這個策略自己沒問題，可是咱們在實際開發中，因爲各類緣由又常常有跨域的需求，傳統的跨域方案是 JSONP，JSONP 雖然能解決跨域可是有一個很大的侷限性，那就是隻支持 GET 請求，不支持其餘類型的請求，而今天咱們說的 CORS（跨域源資源共享）（CORS，Cross-origin resource sharing）是一個 W3C 標準，它是一份瀏覽器技術的規範，提供了 Web 服務從不一樣網域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，這是 JSONP 模式的現代版。

在 Spring 框架中，對於 CORS 也提供了相應的解決方案，今天咱們就來看看 SpringBoot 中如何實現 CORS。

實踐

接下來咱們就來看看 Spring Boot 中如何實現這個東西。

首先建立兩個普通的 Spring Boot 項目，這個就不用我多說，第一個命名爲 provider 提供服務，第二個命名爲 consumer 消費服務，第一個配置端口爲 8080，第二個配置配置爲 8081，而後在 provider 上提供兩個 hello 接口，一個 get，一個 post，以下：

@RestController
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "hello";
    }
    @PostMapping("/hello")
    public String hello2() {
        return "post hello";
    }
}

在 consumer 的 resources/static 目錄下建立一個 html 文件，發送一個簡單的 ajax 請求，以下：

<div id="app"></div>
<input type="button" onclick="btnClick()" value="get_button">
<input type="button" onclick="btnClick2()" value="post_button">
<script>
    function btnClick() {
        $.get('http://localhost:8080/hello', function (msg) {
            $("#app").html(msg);
        });
    }

    function btnClick2() {
        $.post('http://localhost:8080/hello', function (msg) {
            $("#app").html(msg);
        });
    }
</script>

而後分別啓動兩個項目，發送請求按鈕，觀察瀏覽器控制檯以下：

Access to XMLHttpRequest at 'http://localhost:8080/hello' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

能夠看到，因爲同源策略的限制，請求沒法發送成功。

使用 CORS 能夠在前端代碼不作任何修改的狀況下，實現跨域，那麼接下來看看在 provider 中如何配置。首先能夠經過 @CrossOrigin 註解配置某一個方法接受某一個域的請求，以下：

@RestController
public class HelloController {
    @CrossOrigin(value = "http://localhost:8081")
    @GetMapping("/hello")
    public String hello() {
        return "hello";
    }

    @CrossOrigin(value = "http://localhost:8081")
    @PostMapping("/hello")
    public String hello2() {
        return "post hello";
    }
}

這個註解表示這兩個接口接受來自 http://localhost:8081 地址的請求，配置完成後，重啓 provider ，再次發送請求，瀏覽器控制檯就不會報錯了，consumer 也能拿到數據了。

此時觀察瀏覽器請求網絡控制檯，能夠看到響應頭中多了以下信息：

這個表示服務端願意接收來自 http://localhost:8081 的請求，拿到這個信息後，瀏覽器就不會再去限制本次請求的跨域了。

provider 上，每個方法上都去加註解未免太麻煩了，有的小夥伴想到能夠講註解直接加在 Controller 上，不過每一個 Controller 都要加仍是麻煩，在 Spring Boot 中，還能夠經過全局配置一次性解決這個問題，全局配置只須要在 SpringMVC 的配置類中重寫 addCorsMappings 方法便可，以下：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowedOrigins("http://localhost:8081")
        .allowedMethods("*")
        .allowedHeaders("*");
    }
}

/** 表示本應用的全部方法都會去處理跨域請求，allowedMethods 表示容許經過的請求數，allowedHeaders 則表示容許的請求頭。通過這樣的配置以後，就沒必要在每一個方法上單獨配置跨域了。

存在的問題

瞭解了整個 CORS 的工做過程以後，咱們經過 Ajax 發送跨域請求，雖然用戶體驗提升了，可是也有潛在的威脅存在，常見的就是 CSRF（Cross-site request forgery）跨站請求僞造。跨站請求僞造也被稱爲 one-click attack 或者 session riding，一般縮寫爲 CSRF 或者 XSRF，是一種挾制用戶在當前已登陸的 Web 應用程序上執行非本意的操做的攻擊方法，舉個例子：

假如一家銀行用以運行轉帳操做的URL地址以下： http://icbc.com/aa?bb=cc，那麼，一個惡意攻擊者能夠在另外一個網站上放置以下代碼： <img src="http://icbc.com/aa?bb=cc">，若是用戶訪問了惡意站點，而她以前剛訪問過銀行不久，登陸信息還沒有過時，那麼她就會遭受損失。

基於此，瀏覽器在實際操做中，會對請求進行分類，分爲簡單請求，預先請求，帶憑證的請求等，預先請求會首先發送一個 options 探測請求，和瀏覽器進行協商是否接受請求。默認狀況下跨域請求是不須要憑證的，可是服務端能夠配置要求客戶端提供憑證，這樣就能夠有效避免 csrf 攻擊。

好了，這個問題就說這麼多，關於 Spring Boot 中的 CORS ，鬆哥還有一個小小的視頻教程

• Spring Boot 中使用 CORS 解決跨域問題

關注公衆號【江南一點雨】，專一於 Spring Boot+微服務以及先後端分離等全棧技術，按期視頻教程分享，關注後回覆 Java ，領取鬆哥爲你精心準備的 Java 乾貨！