温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

"跨域" ----cores By Ajax

发布时间:2020-06-19 12:25:33 来源:网络 阅读:635 作者:Hello_Prudence 栏目:开发技术

跨域实现的方法有好多种:

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


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI