前言

我們的springboot 架手架已經包含了mysql,redis，定時任務，郵件服務，簡訊服務，檔案上傳下載，以及docker-compose 構建映象等等。

接下來讓我們解決另一個常見的問題。一般的情況下，都是前後端分離的，我這個架手架的初衷也是前後端進行分離，所以這裡就涉及到一個很嚴重的問題啦，當協議，埠，IP三者有其一不同就會產生跨域，所以需要做跨域支援。

測試跨域的檔案

在這之前，我們先寫一個測試介面是否跨域的html ,這樣下面的測試比較方便。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link type="test/css" href="css/style.css" rel="stylesheet">

<body>

    <input type="text" style="width:600px;height:30px;font-size:14px;" id="urlText" value="" />
    <br>
    <input type="button" style="margin: 10px";  id="cors" value="判斷是否可訪問"/>

<p>http://localhost:9090/zlflovemm/</p>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
    $(function(){
    $("#cors").click(
        function(){
            var url2 = $("#urlText").val();
            $.post({
                contentType:'application/x-www-form-urlencoded;charset=UTF-8',
                url:url2,
                data: "/rAIeKeSBG1LV+XoIq82/O",
                success:function(data){
                    alert("success");
                }
            })
        });
    });
</script>
</body>
</html>

接下來我們來學習下在springboot 專案中怎麼實現支援跨域。

@CrossOrigin 註解

這種方法是springboot 自帶的，使用比較簡單，在需要支援的跨域的介面上加上這個註解就可以了。
比如在我們專案的demo 介面加上註解.就表示這個介面支援跨域，其中origins = "*"
表示所有的地址都可以訪問這個介面，也可以寫具體的地址，表示只有這個地址訪問才能訪問到介面。
@CrossOrigin(origins = "*")

測試

我們也來測試一下，啟動專案後，在瀏覽器上執行我們的測試的html檔案。
發現localhost:9090/zlflovemm/ 是可以訪問的。

說明跨域是支援的。大夥可以先將註解去掉測試一下，然後加上註解測試一下進行對比。

這種方式雖然很簡單，但是缺點也不小，需要跨域的介面都需要加上這個註解，這對前後端分離的專案是不友好的，所以這種方式基本上用的很少。

重寫WebMvcConfigurer的addCorsMappings 方法。

這種方法在實際專案中也用的比較多，是一種全域性支援跨域的方法。
我們建立一個CorsConfig 類。內容如下：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//專案中的所有介面都支援跨域
                .allowedOrigins("*")//所有地址都可以訪問，也可以配置具體地址
                .allowCredentials(true)
                .allowedMethods("*")//"GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS"
                .maxAge(3600);// 跨域允許時間
    }
}

加上@Configuration 表示是配置類，在專案啟動的時候會載入。實現WebMvcConfigurer 介面並重寫addCorsMappings 方法。程式碼比較簡單，也有註釋。

測試的話，大家可以自行測試，我測試都是通過的和上面一樣測試就可以，這裡就不佔篇幅了。

Filter

除了上面方法外，也可以使用過濾器。我們建立一個CorsFilter 類，內容如下：


@Slf4j
@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
        response.setHeader("Pragma", "no-cache");
        filterChain.doFilter(servletRequest,response);
    }
}

上面程式碼中設定response.setHeader("Access-Control-Allow-Origin", "*");表示所有的地址都可以訪問專案介面。

番外

接下來我們再介紹一個常用的功能，前後端分離，在訪問介面的時候，有的公司往往會增加一下專屬的字尾名才能訪問。實際上沒有什麼太大的作用，能稍微增加一下系統的安全性。這裡我就簡單是實現一下。真個都非常簡單。
一樣的是實現WebMvcConfigurer 介面，重寫configurePathMatch你方法和增加一個dispatcherServlet。

程式碼如下：

@Override
    public void configurePathMatch(PathMatchConfigurer configurer) {
        configurer.setUseRegisteredSuffixPatternMatch(true);
    }

    @Bean
    public ServletRegistrationBean servletRegistrationBean(DispatcherServlet dispatcherServlet) {
        ServletRegistrationBean bean = new ServletRegistrationBean(dispatcherServlet);
        bean.addUrlMappings("*.zlf");
        return bean;
    }

這個功能實現，就只用這個多程式碼，configurePathMatch方法中設定的configurer.setUseRegisteredSuffixPatternMatch(true); 主要是將index 和index.* 都指向我們controller 中配置的@RequestMapping("/index")。

下面的servletRegistrationBean 方法主要是增加自定義攔截器，只有字尾為“.zlf”的接口才放行。

這樣兩步就簡單的實現了介面增加自定義的字尾名啦。

到此為止，springboot 支援跨域的方式就差不多了，當然還有其他的實現方式沒有研究。這些希望對大家有幫助。

好了，就說這麼多啦
程式碼上傳到github：
https://github.com/QuellanAn/zlflovemm

後續加油♡

歡迎大家關注個人公眾號 "程式設計師愛酸奶"

分享各種學習資料，包含java，linux，大資料等。資料包含視訊文件以及原始碼，同時分享本人及投遞的優質技術博文。

如果大家喜歡記得關注和分享喲❤

九、Spring Boot 優雅的實現CORS跨域

前言

測試跨域的檔案

@CrossOrigin 註解

測試

重寫WebMvcConfigurer的addCorsMappings 方法。

Filter

番外

九、Spring Boot 優雅的實現CORS跨域

十九、Spring boot中整合mybatis-generator自動生成程式碼

Java實現CORS跨域請求

Vue+axios+spring boot遇到的問題(跨域請求)

spring boot專案實戰：跨域問題解決

關於 Spring Security OAuth2 中 CORS 跨域問題

go、spring boot、vert.x 用CORS解決跨域

Spring、Spring-Boot、Spring-Security中對CORS（跨域資源共享）的支援

spring boot 中通過CORS實現跨域

十三、springboot 優雅整合spring-boot-admin 實現程式監控

spring boot Cors 跨域

Spring Boot Web應用開發 CORS 跨域請求設定 Invalid CORS request

3、Spring Boot 2.x整合Mybatis並且實現單表的增刪除改查

【備忘】使用dubbo、spring-boot等技術實現網際網路後臺服務專案架構視訊教程

（一）、spring boot security 認證--自定義登入實現

【十九】Spring Boot 之多資料來源和分散式事務(JTA、Atomikos、Druid、Mybatis)

Spring-Boot + Atomikos 實現跨庫的分散式事務管理

Spring Boot Web應用開發 CORS 跨域請求支持：

Spring Boot 2.X 如何優雅的解決跨域問題？

spring、spring MVC、spring Boot

九、Spring Boot 優雅的實現CORS跨域

前言

測試跨域的檔案

@CrossOrigin 註解

測試

重寫WebMvcConfigurer的addCorsMappings 方法。

Filter

番外

相關推薦