前言

今天又給大家?guī)?lái)了一個(gè)很重要的知識(shí)點(diǎn)：SpringMVC中如何處理跨域問(wèn)題，本文的內(nèi)容同樣適合于SpringBoot

1、跨域訪(fǎng)問(wèn)報(bào)錯(cuò)

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

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

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

2、同源定義

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

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

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

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

3、跨域問(wèn)題如何解決？

跨域問(wèn)題需要使用CORS來(lái)解決，請(qǐng)求端和后端接口需要遵循CORS規(guī)則來(lái)通信，便可解決跨域訪(fǎng)問(wèn)的問(wèn)題。

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

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

4、CORS原理

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

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

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

5、SpringMVC中如何解決跨域問(wèn)題？

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

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

SpringMVC中提供了3種方案來(lái)解決跨域問(wèn)題，下面一起來(lái)了解下。

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

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

也可以在類(lèi)上標(biāo)注@CrossOrigin注解，那么這個(gè)類(lèi)中所有接口會(huì)支持跨域訪(fǎng)問(wèn)

也可同時(shí)在類(lèi)和方法上標(biāo)注@CrossOrigin注解，最后方法上的跨域訪(fǎng)問(wèn)會(huì)取合并后的配置

@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配置，這類(lèi)似于使用篩選器，但可以聲明為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可以添加一個(gè)跨域配置，需要多個(gè)配置可以多次調(diào)用registry.addMapping
        registry.addMapping("/**")
                .allowedOrigins("*") //放行哪些原始域
                .allowedMethods("PUT", "DELETE"，"POST", "GET") //放行哪些請(qǐng)求方式
                .allowedHeaders("header1", "header2", "header3") //放行哪些原始請(qǐng)求頭部信息
                .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);
//放行哪些請(qǐng)求方式
config.addAllowedMethod("*");
//放行哪些原始請(qǐng)求頭部信息
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個(gè)接口，第一個(gè)接口上標(biāo)注了@CrossOrigin注解，可以解決跨域訪(fǎng)問(wèn)的問(wèn)題，而第二個(gè)方法沒(méi)有標(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)頁(yè)面：cors.html

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

<!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">跨域測(cè)試test1</button>
<button id="cors-btn2">跨域測(cè)試test2</button>
</body>
</html>

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

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

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

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

9.6、點(diǎn)擊第1個(gè)按鈕，測(cè)試跨域正常請(qǐng)求

再看看下面這個(gè)圖，正常的跨域請(qǐng)求，響應(yīng)頭多了幾個(gè)頭，主要是Access-Control開(kāi)頭的頭是和CORS相關(guān)的，瀏覽器就是根據(jù)這些響應(yīng)頭來(lái)決定跨域訪(fǎng)問(wèn)是不是正常的，如果沒(méi)有這些頭，瀏覽器將拒絕讀取響應(yīng)體，然后就報(bào)錯(cuò)啦。

9.7、點(diǎn)擊第2個(gè)按鈕，測(cè)試跨域異常請(qǐng)求

10、總結(jié)

掌握SpringMVC中解決跨域問(wèn)題的3種方式

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

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

最新評(píng)論