跨域,簡單地理解就是因為瀏覽器基於安全的同源策略限制不同域名和協議之間的互相訪問。
而AJAX的跨域請求,其實瀏覽器並沒有限制不同域的網絡請求,只是瀏覽器會基於請求返迴響應頭做處理,如果發現是跨域請求且響應頭Access-Control-Allow-Origin未對請求來源設置允許,則根據非同源禁止策略,瀏覽器不會將服務端返回的數據交給AJAX,這樣就會阻止不同域之間的數據交互。
目前主要有兩種比較主流的解決方案:
1)服務端對訪問的來源設置Access-Control-Allow-Origin響應頭許可;
此方法不需要javascript做任何改動,只需要服務端層面做處理,相對來說簡單易用。
header("Access-Control-Allow-Origin:*"); //允許所有域名的跨域請求
header("Access-Control-Allow-Origin:http://www.a.com"); //僅允許www.a.com來源的跨域請求,可以動態地通過$_SERVER['HTTP_ORIGIN']請求來源域,進行多個域的跨域請求許可。
2)JSONP
jsonp的實現原理,其實就是通過動態加載script標籤,預先定義好callback函數處理邏輯,服務端返回的數據其實是一個執行函數的代碼,將有效數據作為callback函數的參數。
此方法需要前端和服務端同時做支持,實現成本也比較低廉。
$callback = $_GET['callback'];
$data = array("status" => 1);
echo $callback . '(' . json_encode($data) . ')'; //等價與 call_func({status:1})