我的學習系列 - SpringBoot解決跨域問題

時間 2021-02-18

標籤 html 前端 java jquery git github ajax spring 跨域瀏覽器欄目 Spring 简体版

原文原文鏈接

開發過程當中老是會據說到跨域這個問題，一直沒有詳細的瞭解過，這裏我就詳細的梳理一下。

源

源（origin）就是協議、域名和端口號。html

同源策略

同源策略是瀏覽器的一個安全功能，不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方資源。因此xyz.com下的js腳本採用ajax讀取abc.com裏面的文件數據是會被拒絕的。前端

同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。java

跨域

URL由協議、域名、端口和路徑組成，若是兩個URL的協議、域名和端口所有相同，則表示他們同源。不然，只要協議、域名、端口有任何一個不一樣，就是跨域。jquery

跨域分析

在Spring Boot上解決跨域問題

1. 搭建一個8080端口的項目

前端頁面使其訪問8081端口的接口：git

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域測試-8080端口</title>
</head>
<body>
    <button id="test">8080 -> 8081</button>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $("#test").click(function () {
        $.ajax({
            url: "http://localhost:8081/hello",
            type: "post",
            success:function (res) {
                alert(res)
            }
        })
    });
</script>
</html>

2. 點擊按鈕測試

火狐瀏覽器進行跨域請求攔截
github

3. 搭建一個8081端口的項目

建立一個/hello的接口ajax

/**
 * 跨域8080端口方法
 * @author zhouzhaodong
 */
@RestController
public class CrossDomainTwoController {

    @RequestMapping("/hello")
    public String hello(){
        return "這是一個來自8081端口的接口！";
    }

}

點擊後觀察瀏覽器，因爲沒有進行任何配置，因此依舊報錯
spring

4. 解決跨域問題

4.1 使用@CrossOrigin註解端口

/**
 * 跨域8080端口方法
 * @author zhouzhaodong
 */
@RestController
public class CrossDomainTwoController {

    @CrossOrigin
    @RequestMapping("/hello")
    public String hello(){
        return "這是一個來自8081端口的接口！";
    }

}

再次點擊按鈕，發現正常返回信息。
跨域

4.2 使用WebMvcConfigurer對象來定義全局CORS配置

註釋掉@CrossOrigin註釋瀏覽器

/**
 * 定義全局CORS配置
 * @author zhouzhaodong
 */
@Configuration
public class MyConfiguration {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/*")
                        .allowedOrigins("*")
                        .allowCredentials(true)
                        .allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")
                        .maxAge(3600);
            }
        };
    }
}

再次點擊按鈕，發現正常返回信息。