跨域問題是指在瀏覽器上運行的Web應用程式試圖通過XMLHttpRequest或Fetch API等方式向不同源（功能變數名稱、協議或埠）的伺服器發送請求時，瀏覽器會根據同源策略（Same-Origin Policy）阻止這種行為。同源策略是一種安全機制，用於限制來自不同源的頁面對當前頁面的訪問。它可以防... ...
前言
在當今互聯網時代，前端開發中經常會遇到跨域問題，即瀏覽器禁止向不同源的伺服器發送請求。這意味著在開發過程中，如果我們的前端代碼需要與其他功能變數名稱下的介面進行通信，我們將面臨無法直接發送請求的困境。跨域問題的存在給開髮帶來了不少麻煩，然而，在跨域問題之下，我們也發現瞭解決的方法。本篇博客將為大家介紹如何解決跨域問題的一些有效策略和技巧。
什麼是跨域問題
跨域問題是指在瀏覽器上運行的Web應用程式試圖通過XMLHttpRequest或Fetch API等方式向不同源（功能變數名稱、協議或埠）的伺服器發送請求時，瀏覽器會根據同源策略（Same-Origin Policy）阻止這種行為。同源策略是一種安全機制，用於限制來自不同源的頁面對當前頁面的訪問。它可以防止惡意的網站通過跨域請求獲取用戶的個人信息或進行未授權操作。
同源策略要求請求的協議、功能變數名稱和埠號必須完全相同才被認為是同源。例如，一個頁面從 http://example.com/index.html 發出的請求，如果請求的目標地址是 http://api.example.com/data，由於協議、功能變數名稱和埠號不一致，就會被瀏覽器阻止。在這種情況下，瀏覽器會拋出一個跨域錯誤，導致請求失敗。
如何解決
-
JSONP（JSON with Padding）：利用 script 標簽的跨域特性，通過動態創建 script 標簽並設置其 src 屬性為跨域的 URL，伺服器端返回的響應數據需要用特定的格式包裹起來，並通過回調函數返回給客戶端。這種方式只適用於 GET 請求，並且需要伺服器端支持返回 JSONP 格式。
-
CORS（跨域資源共用）：在伺服器端設置相應的響應頭，允許跨域請求。通常在伺服器端設置 Access-Control-Allow-Origin 頭部，指定允許的來源功能變數名稱，即可實現跨域請求的許可。CORS 支持各種 HTTP 請求方法，並且更加靈活和安全。
-
代理伺服器：在同源策略限制下，可以通過在同功能變數名稱下的伺服器上設置一個代理伺服器，將客戶端請求轉發到目標伺服器，再將相應的結果返回給客戶端。客戶端只需要與代理伺服器通信，而不是直接與目標伺服器通信，間接實現了跨域請求。
-
WebSocket：WebSocket 是一種基於 TCP 協議的全雙工的通信協議，它不受同源策略的限制，在建立連接後，客戶端與伺服器之間可以直接進行雙向通信。因此，可以利用 WebSocket 實現跨域通信。
在Spring中怎麼解決跨域問題
- 使用 @CrossOrigin 註解：在控制器類或控制器方法上使用@CrossOrigin註解來允許指定的功能變數名稱進行跨域訪問。代碼示例如下：
在控制器類上使用@CrossOrigin註解：
@RestController
@CrossOrigin //該類所有方法允許跨域
public class AccountController {
//註冊 API 介面
@PostMapping("/v1/user/register")
public ResultVo<String> register(AccountDto accountDto){
System.out.println(accountDto);
return ResultVo.success("register_ok");
}
}在控制器類方法上使用@CrossOrigin註解：
@RestController
public class AccountController {
//註冊 API 介面
@PostMapping("/v1/user/register")
@CrossOrigin //該方法允許跨域
public ResultVo<String> register(AccountDto accountDto){
System.out.println(accountDto);
return ResultVo.success("register_ok");
}
}- 在配置文件中來自定義跨域配置
<!-- 配置CORS跨域 -->
<mvc:cors>
<mvc:mapping path="/**"/>
</mvc:cors>總結
跨域問題是在Web開發中常遇到的挑戰之一。當頁面上的JavaScript代碼嘗試通過XMLHttpRequest或Fetch API等方式向不同功能變數名稱、協議或埠的伺服器發送請求時，瀏覽器會根據同源策略（Same-Origin Policy）阻止這種行為。解決跨域問題有多種方法，常用的包括JSONP、CORS、代理伺服器等。在Spring框架中，可以使用@CrossOrigin註或者配置全局跨域設置來處理跨域請求。選擇不同的解決方案取決於項目需求和後端服務的支持情況。通過正確的解決方案，可以保證數據通信的安全性和穩定性，提高開發效率和用戶體驗。跨域問題是web開發中不可忽視的問題，瞭解解決方案對於前端開發者至關重要。
