AJAX中怎么利用 CORS解決跨域

這篇文章給大家介紹AJAX中怎么利用 CORS解決跨域，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

什么是AJAX ？

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

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

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

• 方案一：

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

  
  

  
  

  
  

  服務方設置： Access-Control-Allow-Origin。

  切記：Access-Control-Allow-Origin 不可設置為 * 。

  //設置可供訪問的白名單
  $white_list = ['http://t1.abc.com','http://t2.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>

關于AJAX中怎么利用 CORS解決跨域就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。