zoukankan      html  css  js  c++  java
  • 浏览器同源策略之JSONP、CORS

    对于不同的域名,如果是requests.get(url)请求,因为没有走浏览器,所以url不受限制,可以访问。但是如果用ajax请求,就不能直接向不同域名的url请求数据,原因是浏览器限制的,所以为了绕过浏览器这种限制,就有了JSONP。具体的应用如下:

    客户端:
    <script>
    
        $.ajax({
        url: 不同域名的url,
        type: 'GET',
        dataType: 'JSONP',
        jsonp: callback,  ---------> 作用:在请求的url的后面加上?callback='list',list作为对方的相应数据的包裹函数:
                            -------> HttpResponse(list(响应数据))
        jsonpCallback: 'list'
        
        })
    
    </script>
    
    
    请求数据的本质: 看似用了ajax请求数据,其实没有。如果把url放到HTML中的img标签、script标签,iframe标签的中的src中就不会被浏览器的同源访问限制住。所以基于这种思想,就有了JSONP的的作用本质。
    
    在客户端做了两件事:
      1.创建了一个script标签:<script src='不同域名的url'></script>
      2.创建了一个函数:
        <script>
          function list(args){
            对请求到的args进行处理;
          }
        </script>
    对方的返回数据也必须符合一个规则:
      func = request.GET.get('callback')
      HttpResponse(func(数据))

    注意:
      JSONP只能发送GET请求,因为它的本质是把一个url放到src中,发送到对方,请求数据,而不能发送数据。

     CORS:

    客户端:只管发送数据,不用设置其它的。
    <script>
    
        $.ajax({
        url: 不同域名的url,
        type: 'POST',
        data:{},
        success:function(args){
          对响应的数据进行处理;
        }
    }) </script>

    远程:
    只需要设置响应头:
      response = HttpResponse(数据)
      response['Access-Control-Allow-Origin'] = "客户端的域名" -----> 意思是只能指定的客户端可以请求,其它的不用。
      
    response['Access-Control-Allow-Origin'] = "*" -----> 所有的请求都可以
      return response

    注意:
      ajax发送
      可以发送数据

    基于cors的ajax请求:

      1. 支持跨域,简单请求:HEAD、GET、POST 

        简单请求:一次请求

      2. 支持跨域,非简单请求:除了简单请求都是非简单请求

        非简单请求:两次请求,在发送数据之前会先发送一次请求用于“预检”,只有“预检”通过后再发送一次请求用于数据传输。

      

    非简单请求:
    客户端:
    <script>
    
        $.ajax({
        url: 不同域名的url,
        type: 'PUT',
        header:{'xxx':'y'},
        data:{},
        success:function(args){
          对响应的数据进行处理;
        }
    }) </script>

    远程:
    if request.method == "OPTIONS":
        # 预检
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = "*" -----> 允许所有的客户端请求
        response['Access-Control-Allow-Method'] = "PUT" ---->"预检"请求时,允许请求方式
        response['Access-Control-Allow-Header'] = "xxx" ---->"预检"请求时,允许请求头
        response['Access-Control-Allow-Header'] = "xxx" ---->告诉请求端可以xxx请求头

        return response
      elif request.method == "GET":
         response = HttpResponse(数据)
         response['Access-Control-Allow-Origin'] = "*"
         return response

    
    
  • 相关阅读:
    AngularJS 学习 (一)Start
    div固定位置,不随滚动条滚动
    两个单例小程序
    java实现人脸识别V3版本开发
    flex>行为和特效 小强斋
    flex>导航 小强斋
    flex>定位和布局 小强斋
    flex>菜单设计 小强斋
    flex>其他交互设计 小强斋
    flex>菜单设计 小强斋
  • 原文地址:https://www.cnblogs.com/guomeina/p/7681366.html
Copyright © 2011-2022 走看看