跨域請求,是前端開發比較常見的問題。通常為了提高的開發效率,項目開發過程中進行前后端分離,部署各自獨立,就可能會出現前端后域名不一致,在通訊過程中就會出現跨域的問題。由于項目開發過程中涉及,借此機會對跨域問題進行整理。

下面也簡單總結一下,有以下幾種跨域方式:

  1. JSONP(JSON with Padding)跨域:JSONP實現跨域的核心原理是利用<script>標簽沒有跨域限制的特性,通過在請求的URL中添加回調函數名稱,服務器返回一個JavaScript函數的調用,并將需要傳遞的數據作為參數傳遞給該函數。該方式只支持GET請求,而且只能實現單向數據傳輸。
  2. CORS(Cross-Origin Resource Sharing)跨域:CORS是一種標準的跨域解決方案,它通過在服務端設置Access-Control-Allow-*頭信息來實現跨域。該方式可以支持GETPOST等多種請求方式,而且可以雙向通信,實現更靈活的數據傳輸。CORS需要瀏覽器和服務器同時支持。
  3. WebSocket跨域WebSocket是一種新的協議,它可以在瀏覽器和服務器之間建立持久化的連接,從而實現雙向實時通信。在跨域方面,WebSocket也需要服務器支持跨域。
  4. 代理跨域:代理跨域是一種常見的解決方案,它的核心思想是在客戶端和服務端之間加一個中間層,將客戶端的請求先發送給中間層,中間層再將請求發送給服務端,待服務端響應后再將響應發送給客戶端。因為是同源策略下的服務端請求,所以不存在跨域問題。
  5. postMessage跨域:postMessage是HTML5引入的一種消息傳遞機制,它可以讓來自不同源的腳本建立通信渠道,從而實現跨域數據傳輸。但是該方式需要目標窗口明確設置監聽事件,否則容易受到惡意攻擊。