AJAX 跨域問題

haoyq發表於2019-02-16
跨域

導語

AJAX 的跨域問題，常用的解決方法有兩種，簡單記錄下，詳細內容檢視參考資料。以下示例自建兩個域名測試，www.test.com、www.example.com。

同源策略

同源策略限制從一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的關鍵的安全機制。

兩個頁面，如果域名、協議、埠都相同，即是同源，其間的互動不存在問題。同源策略是很重要的安全機制，但是有些時候需要突破這種機制，這就需要跨域。

JSONP

JSONP 是很常用的方法，它是利用 <script> 標籤沒有跨域限制的原理實現。以下是在 www.test.com 中使用 JQuery 示例

$.ajax( {    
    url:`//www.example.com`,
    data:{name:`tom`},    
    type:`get`,    
    dataType:`jsonp`,
    jsonp: "callback",    
    success:function(data) {    
          console.log(data)  
     }
})

以下是 www.example.com 的 PHP 處理

<?php
$callback = $_GET[`callback`];
$name = $_GET[`name`];

// 處理資料
$data = md5($name);

echo $callback . `(` . json_encode($data) . `)`;

CORS

CORS (Cross-origin resource sharing)，跨域資源共享標準允許 Web 應用伺服器進行跨域訪問控制。相對於 JSONP 只支援 GET ，CORS 支援更多的 HTTP 請求，同時更簡單、安全。不過 CORS 可能會存在相容問題。
以下是在 www.test.com 中傳送 AJAX 請求

$.ajax( {    
    url:`//www.example.com`,
    data:{name:`tom`},    
    type:`post`,    
    dataType:`json`,  
    success:function(data) {    
          console.log(data)  
     }
});

www.example.com 的 PHP 處理

<?php
header("Access-Control-Allow-Origin: http://www.test.com");

$name = $_POST[`name`];

// 處理資料
$data = md5($name);

echo json_encode($data);

參考資料：同源策略、CORS、瀏覽器同源政策及其規避方法、跨域資源共享 CORS 詳解。

相關文章