javascript 之 跨域技术 CORS

原创 2013年12月03日 21:19:41

图像Ping

只要请求完成,就能得到通知,发送一个name参数,常用于跟踪用户点击页面或动态广告曝光次数.

缺点:

1.只能发送GET 请求

2.无法访问服务器的响应文本

    <script>
        var img = new Image();
        img.onload = img.onerror = function(){
            alert("Done!");
        };
        img.src = "http://www.example.com/test?name=Nicholas"; 

    </script>

JSONP

JSONP是通过动态<script>元素来使用,可以为其src属性指定一个跨域URL

    <script>
    
        function handleResponse(response){
            alert("You're at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
        }
    
        var script = document.createElement("script");
        script.src = "http://freegeoip.net/json/?callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);
    </script>

优点:可以直接访问响应文本

在使用非Web服务时,要保证其安全可靠

要确定JSONP请求是否失败也不容易

Comet

IE不支持

    <script>
    
        function createStreamingClient(url, progress, finished){        
            
            var xhr = new XMLHttpRequest(),
                received = 0;
                
            xhr.open("get", url, true);
            xhr.onreadystatechange = function(){
                var result;
                
                if (xhr.readyState == 3){
                
                    //get only the new data and adjust counter
                    result = xhr.responseText.substring(received);
                    received += result.length;
                    
                    //call the progress callback
                    progress(result);
                    
                } else if (xhr.readyState == 4){
                    finished(xhr.responseText);
                }
            };
            xhr.send(null);
            return xhr;
        }

        var client = createStreamingClient("streaming.php", function(data){
                        alert("Received: " + data);
                     }, function(data){
                        alert("Done!");
                     });
        
    </script>

CORS

        function createCORSRequest(method, url){
            var xhr = new XMLHttpRequest();
            if ("withCredentials" in xhr){
                xhr.open(method, url, true);
            } else if (typeof XDomainRequest != "undefined"){
                xhr = new XDomainRequest();
                xhr.open(method, url);
            } else {
                xhr = null;
            }
            return xhr;
        }

        var request = createCORSRequest("get", "http://www.somewhere-else.com/xdr.php");
        if (request){
            request.onload = function(){
                //do something with request.responseText
            };
            request.send();
        }

确保XHR访问的URL安全

1.要求以SSL连接来访问可以通过XHR请求的资源

2.要求每一次请求都要附带验证码

注意,以下方法无效,很容易伪造

1.要求发送POST

2.检查来源URL

3.基于cookie

不要把用户名和密码放在javascrip里





跨域资源共享 CORS 深入学习

跨域资源共享深入学习
  • liujie19901217
  • liujie19901217
  • 2016年08月11日 10:48
  • 640

AJAX跨域请求和CORS跨域资源共享

整理了同源策略限制,出现了跨域请求的需求,原生传统的跨域请求方式,原生js和jQuery中对跨域的处理(JSONP),以及HTML5 中的CORS跨域资源共享。系统条理得梳理好传说中的跨域了!o(^▽...
  • macanfa
  • macanfa
  • 2016年07月19日 12:44
  • 4781

利用nc 直观理解阿里云OSS 存储服务

1、本文要说什么利用nc 直接与阿里云OSS服务器建立TCP 连接,通过输入HTTP 请求头部及数据与OSS进行交互,以此理解阿里云OSS服务的本质及使用阿里云OSS过程中的一些trouble sho...
  • sunrainchy
  • sunrainchy
  • 2016年03月04日 20:59
  • 3018

JavaScript:CORS(跨源资源共享)

XHR的一个主要约束是同源策略,即:相同域、相同端口、相同协议,可以通过跨域资源共享CORS(Cross-Origin Resourse Sharing)实现跨域资源共享。其基本思想是通过自定义HTT...
  • qq_27626333
  • qq_27626333
  • 2016年06月07日 12:29
  • 825

CORS(跨域资源共享) 的配置

http://blog.csdn.net/ohyoyo2014/article/details/24863197 兼容情况: 各种新版本的ie10,firefox,op...
  • newjueqi
  • newjueqi
  • 2014年05月26日 10:23
  • 35150

CORS(跨域资源共享) 的配置

各种新版本的ie10,firefox,opera,safari,chrome以及移动版safari和 android 浏览器 ie9及一下版本请使用flash方式来兼容 通过OPTIONS请求握手...
  • ye1992
  • ye1992
  • 2015年02月04日 16:07
  • 4241

AJAX的跨域问题CORS解决方案

一、什么是AJAX的跨域问题 ajax 是一种请求响应无刷新技术(xmlhttqrequest对象请求服务器  服务器响应数据到客户端)。 JavaScript出于安全方面的考虑,不允许跨域调用其他...
  • rui276933335
  • rui276933335
  • 2015年02月11日 14:23
  • 1044

java web项目使用CORS方法实现跨域请求方案

问题产生背景 需要实现这样一个需求,在当前站点中使用ajax发送一个请求到另一个站点获取数据。js中使用jquery的ajax如下: 1 2 3 4 5 6 7 8 9 10 ...
  • appppppen
  • appppppen
  • 2017年06月13日 23:25
  • 1421

nodejs 跨域CORS 学习

文章参考 http://www.ruanyifeng.com/blog/2016/04/cors.html CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin reso...
  • hbiao68
  • hbiao68
  • 2016年10月21日 11:20
  • 2991

浏览器和服务器实现跨域(CORS)判定的原理

前端对Cross-Origin Resource Sharing 问题(CORS,中文又称'跨域')应该很熟悉了。众所周知出于安全的考虑,浏览器有个同源策略,对于不同源的站点之间的相互请求会做限制(跨...
  • evilstar2015
  • evilstar2015
  • 2016年09月07日 14:10
  • 931
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 之 跨域技术 CORS
举报原因:
原因补充:

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