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