七种跨域方法【1.CROS篇】

原创 2017年01月03日 10:22:31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    /*
    * 问题描述:
    * 我本地http://localhost/cors.html有一需求,
    * 想要访问外域http://www.lamport.me/domeCROS.php文件怎么办?
    * <?php
    *  header("Access-Control-Allow-Origin:*");
    *  echo 'cros';
    *  ?>
    * 如果该文件不能访问,你可以在自己的wamp中配置一个虚拟主机进行访问
    * 虚拟主机的配置地址:
    * http://blog.csdn.net/super_yang_android/article/details/53991982
    * 首先想到的是cros方法
    * */


    // 跨浏览器创建并返回CORS对象
    // param method : 请求的方式, get or post
    // param url : 跨域请求的url
    // return xhr : 返回的跨域资源对象
    function createCORSRequest(method, url){
       var xhr = new XMLHttpRequest();
       if ("withCredentials" in xhr){
           xhr.open(method, url, true);    // CORS都是通过异步的请求
       } else if (typeof XDomainRequest != "undefined"){   // IE
           vxhr = new XDomainRequest();
           xhr.open(method, url);
       } else {
           xhr = null;
       }
       return xhr;
    }
    var request = createCORSRequest("get", "http://lamport.me/domeCROS.php");
    if (request){
        // 用于替代onreadystatechange 检测成功,表示接受数据完毕
        request.onload = function(){
            // 对响应的信息进行处理
            alert(request.responseText);    // 取得响应的内容
        };
        // 用于替代onreadystatechange 检测错误。
        request.onerror = function(){
            // 对响应的信息进行处理
        };
        // 用于停止正在进行的请求。
        request.onabort = function(){
            // 对响应的信息进行处理
            alert(request.responseText);
        };
        // 跨域发送请求
        request.send();
    }


</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

CORS解决ajax跨域问题

一、介绍 CROS是现在主流解决跨域问题的方案,未来估计也是趋势。 1. 跨域资源共享(CORS)Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义...
  • saytime
  • saytime
  • 2016年05月31日 22:40
  • 8305

cros跨域配置

前端应用为静态站点且部署在http://web.xxx.com域下,后端应用发布REST API并部署在http://api.xxx.com域下,如何使前端应用通过AJAX跨域访问后端应用呢?这需要使...
  • Coolyqq
  • Coolyqq
  • 2016年05月04日 14:00
  • 2460

七种跨域方法【7.location.hash篇】

问题描述: 使用location.hash + iframe实现跨越 现在本地页面a.html要访问异域b.html的数据 怎么办?环境配置: a.html 和 c.html我们放在php的wamp中...

react 事件 (笔记)

1.事件处理函数的使用 组件: React 自有方法用户定义方法 事件处理函数可以接受event参数; 如之前用过的: [html] view plain copy ...

七种跨域方法【5.window.postMessage篇】

问题描述: 本地http://localhost/data.html 向异域http://www.lamport.me/data2.html获取数据 如果该文件不能访问,你可以在自己的wamp中配置一...

七种跨域方法【2.document.domain篇】

上一篇七种跨域方法【1.CROS篇】主要解决的是异域之间的传值 这里主要解决的是子域与父域之间的传值 问题描述: 现有父域:http://b.com/b.com.html 要向子域:http:...

Ionic CROS 跨域问题

译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^) 如果你通过 ionic serve 或者 ionic run 命令使...

客户端跨域访问(CROS)之jsonp详解

jsonp is really a simply trick to overcome XMLHttpRequest same domain policy. (As you know one canno...

Spring MVC通过CROS协议解决跨域问题

现在接手学校网络中心的一个项目,根据团队成员的实际情况以及开发需要,老师希望做到前后端完全分离。后台使用java提供restful API 作为核心,前台无论PC或者移动端可以共用一个核心。前期解决了...

CROS实现跨域时授权问题(401错误)的解决

http://www.open-open.com/lib/view/open1463878276539.html 如果我们访问的资源是不需要授权的,也就是在HTTP请求头中不包含 authe...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:七种跨域方法【1.CROS篇】
举报原因:
原因补充:

(最多只允许输入30个字)