"跨域" ----cores By Ajax

跨域實現的方法有好多種：

1. JSONP

2. cores

3. document.domain

4. window.postMessage()

今天主要分析的是Cores的實現---------------------------------------------------------

cores---Cross-Orgin Resource Sharing，使用自定義的HTTP頭部，讓服務器聲明那些來源是可以通過瀏覽器訪問該服務器上的資源，從而決定請求是成功還是失敗。

客戶端：

<input type="button" value="測試開始" onclick="crossDomainRequest()"/>
<div id="content"></div>

<script>
    var content = document.getElementById('content');

    function crossDomainRequest(){
        content.innerHTML = '請求開始';
        var url = 'http://——————————————————';
        //創建ajax對象
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if(xhr){
            //建立連接
            xhr.open('GET',url,true);
            //發送請求
            xhr.send();
            //預檢請求
            xhr.setRequestHeader("POWERED-BY-MENGXIANHUI", "Approve");
            xhr.setRequestHeader("Content-Type", "application/xml");
            //帶驗證信息請求
            xhr.withCredentials = "true";
            
            xhr.onreadystatechange = handler;
        }else{
            content.innerHTML = '不能創建XHR對象';
        }
    }

    function handler(xhr){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var response = xhr.responseText;
                content.innerHTML = "請求結果"+response;
            }else{
                content.innerHTML = "不允許跨域請求";
            }
        }else{
            content.innerHTML = "readyState = "+xhr.readyState;
        }
    }
</script>

服務器端：

protected void Page_Load(object sender, EventArgs e){
   if (Request.HttpMethod.Equals("GET"))
    {
      Response.Write("這個頁面是用來測試跨域 POST 請求的，直接瀏覽意義不大。");
    }
    else if (Request.HttpMethod.Equals("OPTIONS"))
    {
      //通知客戶端允許預檢請求。并設置緩存時間
      Response.ClearContent();
      Response.AddHeader("Access-Control-Allow-Origin", "你的地址");
      Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
      Response.AddHeader("Access-Control-Allow-Headers", "POWERED-BY-MENGXIANHUI");
      Response.AddHeader("Access-Control-Max-Age", "30");
      //此過程無需返回數據
      Response.End();
    }
    else if (Request.HttpMethod.Equals("POST"))
    {
      if (Request.Headers["Origin"].Equals("你的地址"))
      {
        System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
        doc.Load(Request.InputStream);
        Response.AddHeader("Access-Control-Allow-Origin", "http://你的地址");
        Response.Write("您提交的數據是：<br/><br/>" + Server.HtmlEncode(doc.OuterXml));
      }
      else
      {
        Response.Write("不允許你的網站請求。");
      }
    }
}

• Access-Control-Allow-Origin  //判斷來源

• setRequestHeader（）   //預檢請求

• withCredentials     //帶驗證信息請求
  

•