跨域問題？如何解決？

小強不砍樹發表於2023-10-05
跨域

前言

在當今網際網路時代，前端開發中經常會遇到跨域問題，即瀏覽器禁止向不同源的伺服器傳送請求。這意味著在開發過程中，如果我們的前端程式碼需要與其他域名下的介面進行通訊，我們將面臨無法直接傳送請求的困境。跨域問題的存在給開發帶來了不少麻煩，然而，在跨域問題之下，我們也發現瞭解決的方法。本篇部落格將為大家介紹如何解決跨域問題的一些有效策略和技巧。

什麼是跨域問題

跨域問題是指在瀏覽器上執行的Web應用程式試圖透過XMLHttpRequest或Fetch API等方式向不同源（域名、協議或埠）的伺服器傳送請求時，瀏覽器會根據同源策略（Same-Origin Policy）阻止這種行為。同源策略是一種安全機制，用於限制來自不同源的頁面對當前頁面的訪問。它可以防止惡意的網站透過跨域請求獲取使用者的個人資訊或進行未授權操作。

同源策略要求請求的協議、域名和埠號必須完全相同才被認為是同源。例如，一個頁面從 http://example.com/index.html 發出的請求，如果請求的目標地址是 http://api.example.com/data，由於協議、域名和埠號不一致，就會被瀏覽器阻止。在這種情況下，瀏覽器會丟擲一個跨域錯誤，導致請求失敗。

如何解決

  1. JSONP（JSON with Padding）：利用 script 標籤的跨域特性，透過動態建立 script 標籤並設定其 src 屬性為跨域的 URL，伺服器端返回的響應資料需要用特定的格式包裹起來，並透過回撥函式返回給客戶端。這種方式只適用於 GET 請求，並且需要伺服器端支援返回 JSONP 格式。

  2. CORS（跨域資源共享）：在伺服器端設定相應的響應頭，允許跨域請求。通常在伺服器端設定 Access-Control-Allow-Origin 頭部，指定允許的來源域名，即可實現跨域請求的許可。CORS 支援各種 HTTP 請求方法，並且更加靈活和安全。

  3. 代理伺服器：在同源策略限制下，可以透過在同域名下的伺服器上設定一個代理伺服器，將客戶端請求轉發到目標伺服器，再將相應的結果返回給客戶端。客戶端只需要與代理伺服器通訊，而不是直接與目標伺服器通訊，間接實現了跨域請求。

  4. 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開發中不可忽視的問題，瞭解解決方案對於前端開發者至關重要。

相關文章