跨域問題

什么是跨域？

跨域（Cross-Origin Issue）的存在是因為瀏覽器的安全限制，它防止惡意網(wǎng)站利用跨域請求來獲取用戶的敏感信息或執(zhí)行惡意操作。瀏覽器通過實施同源策略來限制網(wǎng)頁在不同源之間進行資源訪問或交互的情況。當一個網(wǎng)頁的協(xié)議、域名、或端口與當前頁面的協(xié)議、域名、或端口不一致時，就會發(fā)生跨域問題。

跨域問題通常涉及以下情況：

• 跨域AJAX請求：當通過XMLHttpRequest或Fetch API發(fā)送AJAX請求時，如果請求的目標URL與當前頁面的協(xié)議、域名或端口不一致，就會被認為是跨域請求。
• 跨域資源共享（CORS）問題：在AJAX請求中，如果目標服務(wù)器沒有正確配置跨域資源共享的響應頭部信息，則瀏覽器會阻止通過AJAX獲取跨域資源。
• 跨域腳本攻擊（XSS）問題：當一個網(wǎng)頁加載了惡意腳本并在其他網(wǎng)頁的上下文中執(zhí)行時，就會發(fā)生跨域腳本攻擊。

什么是瀏覽器的同源策略？

瀏覽器的同源策略（Same-Origin Policy）是一種安全機制，用于限制在瀏覽器中加載的網(wǎng)頁從獲取其他來源的資源或與其他來源的網(wǎng)頁進行交互。它是為了防止惡意網(wǎng)站進行跨站點腳本攻擊（Cross-Site Scripting，XSS）、跨站請求偽造（Cross-Site Request Forgery，CSRF）等安全威脅而設(shè)計的。

同源策略要求請求必須滿足以下三個條件才能被認為是同源：

• 協(xié)議相同：兩個頁面的協(xié)議必須相同（例如，都是http://或都是https://）。
• 域名相同：兩個頁面的域名必須相同（例如，www.example.com 和 example.com 被視為不同域名）。
• 端口相同：如果指定了端口號，那么兩個頁面的端口號必須相同。

當發(fā)生跨域請求時，瀏覽器會阻止以下操作：

• 跨域的 AJAX 請求（XMLHttpRequest 或 Fetch API）。
• 跨域的 Cookie、LocalStorage 或 IndexDB 存儲訪問。
• 跨域的 DOM 操作，例如獲取其他域下的元素或修改其樣式。
• 跨域的嵌入 iframe 元素之間的交互。

例如，如果一個網(wǎng)頁在 http://example.com 的環(huán)境下運行，那么它只能與 http://example.com 或者 https://example.com 相同的協(xié)議、域名和端口的資源進行交互。如果嘗試訪問不同源的資源，瀏覽器會阻止這些操作。

如何解決跨域問題？

解決跨域問題有多種方法，可以根據(jù)具體的場景選擇適合的解決方案，常用方法如下：

• JSONP（JSON with Padding）：JSONP 利用 <script> 標簽沒有跨域限制的特點，在目標網(wǎng)頁中通過動態(tài)創(chuàng)建 <script> 標簽來加載跨域的 JavaScript 文件，并在 URL 參數(shù)中傳遞回調(diào)函數(shù)的名稱，使得目標網(wǎng)頁將數(shù)據(jù)作為函數(shù)參數(shù)傳遞給回調(diào)函數(shù)。JSONP 只適用于 GET 請求。

• CORS（Cross-Origin Resource Sharing）：CORS 是一種在服務(wù)端設(shè)置響應頭部信息的機制，允許特定的源進行跨域訪問。通過在目標服務(wù)器的響應中設(shè)置合適的 CORS 頭部，如 Access-Control-Allow-Origin，Access-Control-Allow-Methods，Access-Control-Allow-Headers 等，可以控制允許的跨域訪問行為。

• 代理服務(wù)器：通過在自己的服務(wù)器上設(shè)置一個代理接口，將跨域請求發(fā)送到目標服務(wù)器，再將獲取到的結(jié)果返回給前端。前端只需要與自己的服務(wù)器進行通信，避免了直接與目標服務(wù)器跨域通信的問題。

• WebSocket：WebSocket 協(xié)議本身不受同源策略限制，可以在瀏覽器和服務(wù)器之間建立持久連接，實現(xiàn)實時雙向通信。使用 WebSocket 可以規(guī)避跨域問題。

• postMessage API：如果頁面之間需要進行跨域通信，可以使用 postMessage API，在不同窗口或 iframe 間傳遞消息。這種方法適用于不同窗口、不同域的頁面之間的通信需求。

SpringBoot 解決跨域問題

注：環(huán)境中出現(xiàn)跨域問題的原因有很多，解決方法并不相同，根據(jù)具體的場景選擇適合的解決方案即可。

方式一：@CrossOrigin 注解

在 SpringBoot 中，在 Controller 類上使用 @CrossOrigin 注解解決跨域問題：

@CrossOrigin
@RestController
public class LoginController {

    @PostMapping("/login")
    public User login(@RequestBody User user){
        return user;
    }

}

方式二：CorsConfig.java 配置類（常用）

在項目中創(chuàng)建一個名為 CorsConfig.java 配置類來啟用 CORS 支持，解決跨域問題：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允許所有URL
                .allowedOrigins("*") // 設(shè)置允許跨域請求的源，這里設(shè)置為允許所有源
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允許的請求方法
                .allowedHeaders("*") // 允許的請求頭
                .allowCredentials(true) // 允許攜帶認證信息（如cookies）
                .maxAge(3600); // 預檢請求的緩存時間（單位：秒）
    }
}

到此這篇關(guān)于SpringBoot使用CORS實現(xiàn)無縫跨域的方法實現(xiàn)的文章就介紹到這了,更多相關(guān)SpringBoot CORS無縫跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論