AJAX 跨域解決方案 - CORS

什麼是AJAX？

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

同源策略是對XHR的一個主要約束，它為通信設置了「相同的域、相同的埠、相同的協議」這一限制。

試圖訪問上述限制之外的資源都會引發安全錯誤，除非採用被認可的跨域解決方案。

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

哪些訪問屬於跨域？

http://a.com/ 不允許訪問 http://b.com(不同域)nhttp://a.com 不允許訪問 https://a.com(同一域名，不同協議)nhttp://a.com 不允許訪問 http://a.com:8080(同一域名，不同埠)nhttp://a.com 不允許訪問 http://192.168.1.1(域名和域名對應的ip)nhttp://a.a.com 不允許訪問 http://b.a.com(主域相同，子域不同)n

三種解決方案：

• 方案一：

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

  

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

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

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

  另：如果請求的是html，在文件里加上meta標籤。

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

• 方案二:

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

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

• 方案三：

  與方案一類似。

  修改Nginx Apache 配置：

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

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

Thanks ~

推薦閱讀：