zoukankan      html  css  js  c++  java
  • 跨域请求的处理方法

     阅读目录

    同源策略

    同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

    同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

    jsonp

    错误信息:已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:7766/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

    请求和响应都已经发生了,是浏览器对非同源请求返回的结果做了拦截。

    jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。

    借助script标签,实现跨域请求,示例:

    # =============================http://127.0.0.1:8001/index
    
    
    <button>ajax</button>
    {% csrf_token %}
    
    <script>
        function func(name){
            alert(name)
        }
    </script>
    
    <script src="http://127.0.0.1:7766/SendAjax/"></script>
    
    
    # =============================http://127.0.0.1:8002/
    from django.views.decorators.csrf import csrf_exempt
    
    @csrf_exempt
    
    
    def SendAjax(request):
    
        import json
    
        print("++++++++")
        # dic={"k1":"v1"}
        return HttpResponse("func('yuan')")  # return HttpResponse("func('%s')"%json.dumps(dic))
    View Code

    这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。

    将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义。

          一般情况下,我们希望这个script标签能够动态的调用,而不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。我们可以通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务了。

    <button onclick="f()">sendAjax</button>
    
    <script>
        function addScriptTag(src){
             var script = document.createElement('script');
             script.setAttribute("type","text/javascript");
             script.src = src;
             document.body.appendChild(script);
             document.body.removeChild(script);
        }
    
    
        function func(name){
            alert("hello"+name)
        }
    
        function f(){
             addScriptTag("http://127.0.0.1:7766/SendAjax/")
        }
    </script>
    View Code

    为了更加灵活,现在将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调:

    将8001的f()改写为:

    function f(){
             addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
        }
    

     8002的views改为:

    def SendAjax(request):
     
        import json
     
        dic={"k1":"v1"}
     
        print("callbacks:",request.GET.get("callbacks"))
        callbacks=request.GET.get("callbacks")
     
        return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))
    

    jQuery对JSONP的实现

    getJSON

    jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法

    8001的html改为:

    <button onclick="f()">sendAjax</button>
    
    <script>
    
        function f(){
              $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
                alert("hello"+arg)
            });
        }
        
    </script>
    View Code

    8002的views不改动。

    结果是一样的,要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个问号是内部自动生成的一个回调函数名

          此外,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现

    $ajax

    8001的html改为:

    <script>
    
        function f(){
              $.ajax({
                    url:"http://127.0.0.1:7766/SendAjax/",
                    dataType:"jsonp",    //说明是jsonp请求
                    jsonp: 'callbacks',    //相当于url键值对里的key
                    jsonpCallback:"SayHi"    //相当于URL键值对里的value,回掉函数的函数名
               });
    
           }
    
        function SayHi(arg){
                    alert(arg);
                }
    
    </script>
    

     8002的views不改动。

    最简单的形式还是通过回调函数来处理:

    <script>
    
        function f(){
    
                $.ajax({
                   url:"http://127.0.0.1:7766/SendAjax/",
                   dataType:"jsonp",            //必须有,告诉server,这次访问要的是一个jsonp的结果。
                   jsonp: 'callbacks',          //jQuery帮助随机生成的:callbacks="wner"
                   success:function(data){
                       alert("hi "+data)
                  }
             });
    
           }
    
    </script>
    

      jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名'SayHi',server端接受callback键对应值后就可以在其中填充数据打包返回了; 

    jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。  

    注意 JSONP一定是GET请求

    实例应用

    <input type="button" onclick="AjaxRequest()" value="跨域Ajax" />
    
    
    <div id="container"></div>
    
    
        <script type="text/javascript">
            function AjaxRequest() {
                $.ajax({
                    url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                    type: 'GET',
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    jsonpCallback: 'list',
                    success: function (data) {
                        
                        $.each(data.data,function(i){
                            var item = data.data[i];
                            var str = "<p>"+ item.week +"</p>";
                            $('#container').append(str);
                            $.each(item.list,function(j){
                                var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
                                $('#container').append(temp);
                            });
                            $('#container').append("<hr/>");
                        })
    
                    }
                });
            }
    </script>
    View Code

    回到顶部

    CORS 解决跨域

    跨域请求时浏览器报错:错误信息:已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:7766/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

    解决方法:在服务端响应时相应头带上'Access-Control-Allow-Origin'键值对

    views

    def get_ajax(request):
       s = {"name": "egon", "age": 122}
    
        response = HttpResponse(json.dumps(s))
    
        response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8010"   
        # "*"代表所有域名,多个域名用列表
    
        return response    
    

    如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误 

    简单请求与复杂请求

    简单请求:

    • HEAD
    • GET
    • POST

    非简单请求

    • PUT
    • DELETE

    复杂请求

    预检请求

    非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUTDELETE,或者Content-Type字段的类型是application/json

    非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求(OPTIONS),称为"预检"请求(preflight)。

    浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

    OPTIONS /cors HTTP/1.1
    Origin: http://api.bob.com
    Access-Control-Request-Method: PUT
    Access-Control-Request-Headers: X-Custom-Header
    Host: api.alice.com
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...
    

    "预检"请求用的请求方法是OPTIONS表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源。

    除了Origin字段,"预检"请求的头信息包括两个特殊字段。

    (1)Access-Control-Request-Method

    该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT

    (2)Access-Control-Request-Headers

    该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header

    views

               if request.method=="OPTIONS":  # 预检
    			   response = HttpResponse()
    
    			   response["Access-Control-Allow-Origin"] =  "http://127.0.0.1:8010"   #允许跨域请求的域名
    			   response["Access-Control-Allow-Methods"] = "PUT"     #允许的请求方式
    
    			   return response
    			   
    	  elif request.method=="PUT":
    			   s = {"name": "egon", "age": 122}
    
    			   response = HttpResponse(json.dumps(s))
    
    			   response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8010"
    
    			   return response
    

    与JSONP的比较

    CORS与JSONP的使用目的相同,但是比JSONP更强大。

    JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

    参考链接:http://www.ruanyifeng.com/blog/2016/04/cors.html

  • 相关阅读:
    Eclipse安装Hadoop插件
    (转)Ubuntu14.0.4中hadoop2.4.0伪分布模式配置
    Hadoop--DataNode无法启动
    启动与关闭hadoop
    hadoop中执行命令时发生错误
    strings命令
    Deriving data from ElasticSearch Engine
    elasticsearch data importing
    reading words in your computer and changing to female voice, linux festival text2wave saving wav files
    DDNS client on a Linux machine
  • 原文地址:https://www.cnblogs.com/zhoujunhao/p/8243436.html
Copyright © 2011-2022 走看看