前言

今天又給大家?guī)砹艘粋€很重要的知識點(diǎn)：SpringMVC中如何處理跨域問題，本文的內(nèi)容同樣適合于SpringBoot

1、跨域訪問報錯

當(dāng)一個請求url的協(xié)議、域名、端口三者之間任意一個與當(dāng)前頁面url不同即為跨域。

出于安全原因，瀏覽器禁止Ajax調(diào)用駐留在當(dāng)前原點(diǎn)之外的資源，比如從a.com發(fā)送一個ajax請求到b.com，則瀏覽器控制臺會報跨域訪問錯誤。

如下圖，從http://localhost:63342/站點(diǎn)頁面中向ttp://localhost:8080/chat21/cors/test2發(fā)送一個ajax請求，則出現(xiàn)了紅色的錯誤信息，錯誤中包含了Access-Controll-Allow-Origin這樣字樣的錯誤，以后看到這個的時候，大家就要一眼看出來這是跨域問題。

2、同源定義

同源策略是瀏覽器的一個重要的安全策略，它用于限制一個源的文檔或其加載的腳本如何與另外一個源進(jìn)行交互，它能夠隔絕惡意文檔，減少被攻擊的媒介。

如果兩個URL的協(xié)議、主機(jī)名和端口號都是相同的，那么這兩個URL就是同源的，否則不同源，不同源的訪問就會出現(xiàn)跨域問題，就會出現(xiàn)上面的錯誤。

下表給出了與 URL http://store.company.com/dir/page.html 的源進(jìn)行對比的示例:

也就是說當(dāng)在http://store.company.com/dir/page.html這個網(wǎng)站中向https://store.company.com、http://store.company.com:81和http://news.company.com三個地址發(fā)起AXJX請求都會失敗并且會報跨域的錯誤。這就是瀏覽器的同源策略，只能訪問同源的數(shù)據(jù)。

3、跨域問題如何解決？

跨域問題需要使用CORS來解決，請求端和后端接口需要遵循CORS規(guī)則來通信，便可解決跨域訪問的問題。

CORS全稱Cross-Origin Resource Sharing, 即跨域資源共享，是一個由一系列HTTP頭組成的系統(tǒng)，這些HTTP頭決定瀏覽器是否阻止前端javascript代碼獲取跨域請求的響應(yīng)。為什么需要CORS ？這是因為瀏覽器存在同源安全策略，當(dāng)我們在當(dāng)前域請求另外一個域的資源時，瀏覽器默認(rèn)會阻止腳本讀取它的響應(yīng)，這時CORS就有了用武之地。

跨源資源共享（CORS）是由大多數(shù)瀏覽器實現(xiàn)的W3C規(guī)范，允許您靈活地指定什么樣的跨域請求被授權(quán)，而不是使用一些不太安全和不太強(qiáng)大的策略，如IFRAME或JSONP等。

4、CORS原理

CORS的原理：簡單點(diǎn)說，就是在請求頭或響應(yīng)頭中添加了一些配置，通過這些配置來便可輕松解決跨域問題。

想詳細(xì)了解CORS原理的，建議先閱讀下面2篇文章，然后再繼續(xù)向下看，否則，最后你知道SpringMVC是如何解決的，但是不知道本質(zhì)的原理是什么。

• CORS通信：http://itsoku.com/article/197
• 瀏覽器安全策略 & CORS：http://itsoku.com/article/198

5、SpringMVC中如何解決跨域問題？

SpringMVC內(nèi)部提供了跨域問題的解決方案，只需要做一些簡單的配置，而接口基本上不用做任何修改，便可解決跨域問題。

SpringMVC解決跨域問題的原理也就是SpringMVC遵循了CORS通信的規(guī)則來解決了跨域的問題，在響應(yīng)頭中添加了一些CORS需要的信息。

SpringMVC中提供了3種方案來解決跨域問題，下面一起來了解下。

6、方案1：方法或者類上標(biāo)注@CrossOrigin注解

接口方法上標(biāo)注org.springframework.web.bind.annotation.CrossOrigin注解，如下test1接口上標(biāo)注了@CrossOrigin注解，這個接口就支持跨域訪問，@CrossOrigin注解中含有更詳細(xì)的配置，這里就不細(xì)說了

也可以在類上標(biāo)注@CrossOrigin注解，那么這個類中所有接口會支持跨域訪問

也可同時在類和方法上標(biāo)注@CrossOrigin注解，最后方法上的跨域訪問會取合并后的配置

@RestController
public class CorsController {
 
    @RequestMapping("/cors/test1")
    @CrossOrigin
    public List<String> test1() {
        List<String> result = Arrays.asList("www.itsoku.com",
                "Spring高手系列",
                "SpringMVC系列",
                "MySQL系列",
                "高并發(fā)系列");
        return result;
    }
 
}

7、方案2：全局配置的方式

除了細(xì)粒度、基于注釋的配置之外，您還可能需要定義一些全局CORS配置，這類似于使用篩選器，但可以聲明為Spring MVC并結(jié)合細(xì)粒度@CrossOrigin配置。默認(rèn)情況下，所有origins and GET, HEAD and POST methods是允許的。

@EnableWebMvc
@Configuration
public class MvcConfig implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
 
        //每次調(diào)用registry.addMappin可以添加一個跨域配置，需要多個配置可以多次調(diào)用registry.addMapping
        registry.addMapping("/**")
                .allowedOrigins("*") //放行哪些原始域
                .allowedMethods("PUT", "DELETE"，"POST", "GET") //放行哪些請求方式
                .allowedHeaders("header1", "header2", "header3") //放行哪些原始請求頭部信息
                .exposedHeaders("header1", "header2") //暴露哪些頭部信息
                .allowCredentials(false) //是否發(fā)送 Cookie
                .maxAge(3600);
 
        // Add more mappings...
    }
}

8、方案3：攔截器的方式CorsFilter

//處理跨域的Filter
//1. 添加 CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//放行哪些原始域
config.addAllowedOrigin("*");
//是否發(fā)送 Cookie
config.setAllowCredentials(false);
//放行哪些請求方式
config.addAllowedMethod("*");
//放行哪些原始請求頭部信息
config.addAllowedHeader("*");
//暴露哪些頭部信息
config.addExposedHeader("*");
//2. 添加映射路徑
UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
corsConfigurationSource.registerCorsConfiguration("/**",config);

9、案例代碼

9.1、案例完整代碼

git地址:https://gitee.com/javacode2018/springmvc-series

9.2、接口代碼：CorsController

CorsController中有2個接口，第一個接口上標(biāo)注了@CrossOrigin注解，可以解決跨域訪問的問題，而第二個方法沒有標(biāo)注。

@RestController
public class CorsController {
 
    @RequestMapping("/cors/test1")
    @CrossOrigin
    public List<String> test1() {
        List<String> result = Arrays.asList("www.itsoku.com",
                "Spring高手系列",
                "SpringMVC系列",
                "MySQL系列",
                "高并發(fā)系列");
        return result;
    }
 
    @RequestMapping("/cors/test2")
    public List<String> test2() {
        List<String> result = Arrays.asList("www.itsoku.com",
                "Spring高手系列",
                "SpringMVC系列",
                "MySQL系列",
                "高并發(fā)系列");
        return result;
    }
 
}

9.3、靜態(tài)頁面：cors.html

靜態(tài)頁面cors.html中添加了2個按鈕，點(diǎn)擊2個按鈕的時候，分別以ajax跨域的方式訪問上面2個接口，第1個按鈕訪問第一個接口，第2個按鈕訪問第二個接口，然后在瀏覽器控制臺查看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cors</title>
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#cors-btn1").click(function () {
                $.ajax({
                    url: "http://localhost:8080/chat21/cors/test1",
                    success: function (data) {
                        console.log(JSON.stringify(data));
                    }
                });
            });
            $("#cors-btn2").click(function () {
                $.ajax({
                    url: "http://localhost:8080/chat21/cors/test2",
                    success: function (data) {
                        console.log(JSON.stringify(data));
                    }
                });
            });
        })
    </script>
</head>
<body>
<button id="cors-btn1">跨域測試test1</button>
<button id="cors-btn2">跨域測試test2</button>
</body>
</html>

9.4、將chat21-cores模塊發(fā)布到tomcat

9.5、運(yùn)行靜態(tài)頁面cors.html

在idea中選中cors.html，然后鼠標(biāo)右鍵->Run，即可運(yùn)行

運(yùn)行效果如下（最好以chrome瀏覽器運(yùn)行），idea中支持直接運(yùn)行靜態(tài)頁面，大家注意這里的端口是63342，而上面tomcat的端口是8080，然后瀏覽器中按F12打開瀏覽器控制臺，選中Console選項卡，稍后在這里可以看到點(diǎn)擊按鈕驗證跨域的效果。

9.6、點(diǎn)擊第1個按鈕，測試跨域正常請求

再看看下面這個圖，正常的跨域請求，響應(yīng)頭多了幾個頭，主要是Access-Control開頭的頭是和CORS相關(guān)的，瀏覽器就是根據(jù)這些響應(yīng)頭來決定跨域訪問是不是正常的，如果沒有這些頭，瀏覽器將拒絕讀取響應(yīng)體，然后就報錯啦。

9.7、點(diǎn)擊第2個按鈕，測試跨域異常請求

10、總結(jié)

掌握SpringMVC中解決跨域問題的3種方式

1. 注解的方式：@CrossOrigin
2. 全局配置的方式：WebMvcConfigurer接口的addCorsMappings方法中注冊CORS配置
3. 攔截器的方式：CorsFilter

到此這篇關(guān)于SpringBoot中到底該如何解決跨域問題的文章就介紹到這了,更多相關(guān)SpringBoot解決跨域問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論