跨域問(wèn)題

什么是跨域？

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

跨域問(wèn)題通常涉及以下情況：

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

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

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

同源策略要求請(qǐng)求必須滿(mǎn)足以下三個(gè)條件才能被認(rèn)為是同源：

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

當(dāng)發(fā)生跨域請(qǐng)求時(shí)，瀏覽器會(huì)阻止以下操作：

• 跨域的 AJAX 請(qǐng)求（XMLHttpRequest 或 Fetch API）。
• 跨域的 Cookie、LocalStorage 或 IndexDB 存儲(chǔ)訪(fǎng)問(wèn)。
• 跨域的 DOM 操作，例如獲取其他域下的元素或修改其樣式。
• 跨域的嵌入 iframe 元素之間的交互。

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

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

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

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

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

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

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

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

SpringBoot 解決跨域問(wèn)題

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

方式一：@CrossOrigin 注解

在 SpringBoot 中，在 Controller 類(lèi)上使用 @CrossOrigin 注解解決跨域問(wèn)題：

@CrossOrigin
@RestController
public class LoginController {

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

}

方式二：CorsConfig.java 配置類(lèi)（常用）

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

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è)置允許跨域請(qǐng)求的源，這里設(shè)置為允許所有源
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允許的請(qǐng)求方法
                .allowedHeaders("*") // 允許的請(qǐng)求頭
                .allowCredentials(true) // 允許攜帶認(rèn)證信息（如cookies）
                .maxAge(3600); // 預(yù)檢請(qǐng)求的緩存時(shí)間（單位：秒）
    }
}

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

最新評(píng)論