浏览器同源策略之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


 

posted @ 2017-10-17 14:12  背着石头的小蚂蚁  阅读(212)  评论(1编辑  收藏  举报