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(主域相同，子域不一樣)

三種解決方案：

• 方案一：

//弊端：存在瀏覽器兼容的問題

須要被請求方的服務端設置： 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 配置：

//Nginx

http {
  ......
  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>

你們能夠根據本身的狀況進行選擇方案。

---

來源：http://mp.weixin.qq.com/s?__b...

Thanks ~

AD: