"跨域" ----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     //带验证信息请求