[Ajax] -- AJAX 跨域解決方案 - CORS

什麼是AJAX。

AJAX 是無需重新整理頁面就能夠從伺服器去的資料的一種方法，負責Ajax運作的核心對象是XMLHttpRequest(XHR)對象。

同源策略是對XHR的一個主要約束，它為通訊設定了“相同的域、相同的連接埠、相同的協議”這一限制。
試圖訪問上述限制之外的資源都會引發安全錯誤，除非採用被認可的跨域解決方案。

這個方案叫做CORS（Cross-Origin Resource Sharing）跨源資源共用。

哪些訪問屬於跨域。 http://a.com 不允許訪問http://b.com(不同域) http://a.com 不允許訪問https://a.com(同一網域名稱，不同協議) http://a.com 不允許訪問http://a.com:8080(同一網域名稱，不同連接埠) http://a.com 不允許訪問http://192.168.1.1(網域名稱和網域名稱對應的ip) http://a.a.com 不允許訪問http://b.a.com(主域相同，子域不同)

三種解決方案：

方案一：

//弊端：存在瀏覽器安全色的問題
AJAX 跨域解決方案 - CORS

需要被請求方的服務端設定： Access-Control-Allow-Origin

切記：Access-Control-Allow-Origin 不可設定為 * ，設定為可訪問的網域名稱。

//設定可供訪問的白名單$white_list = ['http://cdn.abc.com','http://abc.com'];$_SERVER['HTTP_ORIGIN'] //表示請求方的網域名稱$http_origin = '';if (!empty($_SERVER['HTTP_ORIGIN']) && in_array($_SERVER['HTTP_ORIGIN'],$white_list)) {    $http_origin = $_SERVER['HTTP_ORIGIN'];    //設定 header 資訊    header("Access-Control-Allow-Origin: {$http_origin}");    header("Access-Control-Allow-Methods", "POST,GET");    header('Access-Control-Allow-Credentials:true');  //允許訪問Cookie    header('Access-Control-Allow-Headers : X-Requested-With'); //設定Headers}//執行代碼邏輯...

另：如果請求的是html，在檔案裡加上meta標籤。

<meta http-equiv="Access-Control-Allow-Origin" content="*">

方案二:

//弊端：不支援 POST 請求。

使用 JSONP 進行解決跨域問題，網上文章蠻多的。

方案三：

與方案一類似。

修改Nginx Apache 配置：

//Nginxhttp {  ......  add_header Access-Control-Allow-Origin *;  add_header Access-Control-Allow-Headers X-Requested-With;  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;  ......}Apache :<Directory />    ......    Header set Access-Control-Allow-Origin *</Directory>

大家可以根據自己的情況進行選擇方案。