django基础－跨域操作jsonp/cors
什么是跨域
所谓的跨域就是进行不用域名内的请求，比如我在A域名想访问B域名的内容就是一种跨域的行为。
但是在我们浏览器端会有一个同源策略的设置，这个同源策略只对Ajax请求有限制，如果你通过Ajax请求发送数据，在被访问的一端能够接受访问请求并且进行处理后返回给浏览器，但是浏览器不进行接收，所以不能进行跨域请求。
我们知道浏览器会对Ajax请求进行同源策略但是对带有src功能的标签没有进行限制。
一个方法可以解决这个同源策略的问题，方法是：设置通过带有src的标签去访问其他域名的内容。跨域方法：jsonp
一、设置本地配置和Django配置文件
1、设置本地配置和Django配置文件
mac:cd /etc;vim hosts
1 127.0.0.1 www.s4.com 2 127.0.0.1 www.s5.com
2、设置Django配置文件settings的内容
ALLOWED_HOSTS = ['www.s4.com',]
二、JOSNP（自动动态生成标签）
1、JOSNP自动动态生成带有src的标签（html）（通过带有src的标签进行访问）
1 ==============================================通过src进行访问 html========================================= 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 {#这个是josnp采用的方式 要求客户端和服务端进行约束 自己动态创建标签#} 10 function getUsers() { 11 {#定义一个点击函数#} 12 var tag =document.createElement('script'); 13 {#创建一个script标签，name=tag#} 14 tag.src='http://www.s4.com:8010/users/?callback=bbb'; 15 {#通过tag.src设置访问路劲，这个是get请求把数据放在url上#} 16 {# tag.src='http://www.s4.com:8010/users/?funcname=bbb';#} 17 document.head.appendChild(tag); 18 {#在把名字等于tag的标签添加到请求头中#} 19 } 20 </script> 21 </body> 22 </html>
2、JOSNP自动动态生成带有src的标签（views）
1 from django.shortcuts import render,redirect,HttpResponse 2 import json 3 # Create your views here. 4 5 def users(request): 6 v =request.GET.get('callback') 7 # v =request.GET.get('funcname') 8 print('请求来了') 9 user_list=[ 10 'alex','eric','egon' 11 ] 12 user_list_str=json.dumps(user_list) 13 temp ='%s(%s)' %(v,user_list_str) 14 print(temp) 15 return HttpResponse(temp)
三、JOSNP（JQuery）
1、JOSNP 通过JQuery本身的方式访问（html）
1 ====================================通过JQuery访问 html=================================================== 2 <!DOCTYPE html 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 {#通过JQuery进行跨域请求，只要遵循JQuery标准就能成功访问#} 10 function getUsers() { 11 {#定义一个点击函数#} 12 $.ajax({ 13 {#通过Ajax 向http://www.s4.com:8010/users/发送请求#} 14 url: 'http://www.s4.com:8010/users/', 15 type: 'POST', 16 {#发送方式#} 17 dataType: 'JSONP', 18 {#设置JSONP模式#} 19 jsonp: 'funcname', 20 {#Jsonp的值是funcname#} 21 jsonpCallback: 'bbb' 22 {#设置后台的函数名#} 23 }) 24 25 function bbb(arg) { 26 console.log(arg) 27 } 28 29 </script> 30 </body> 31 </html>
2、JOSNP 通过JQuery本身的方式访问（views）
1 from django.shortcuts import render,redirect,HttpResponse 2 import json 3 # Create your views here. 4 5 def users(request): 6 v =request.GET.get('callback') 7 # v =request.GET.get('funcname') 8 print('请求来了') 9 user_list=[ 10 'alex','eric','egon' 11 ] 12 user_list_str=json.dumps(user_list) 13 temp ='%s(%s)' %(v,user_list_str) 14 print(temp) 15 return HttpResponse(temp)
跨域方法：CORS(跨域资源共享)
一、CORS（一种不需要通过别的方式去访问其他域名的方式）
cors 的原理是访问其他域名的内容，在执行完成后返回给浏览器时，告知浏览器不对Ajax请求进行同源限制
1、cors简单访问（html）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="获取用户列表" onclick="getUsers()"> 9 <ul id="user_list"></ul> 10 <script src="/static/jquery-3.2.1.js"></script> 11 <script> 12 function getUsers() { 13 $.ajax({ 14 url:'http://www.s4.com:8010/lsd_users/', 15 type:'GET', 16 success:function (arg) { 17 console.log(arg) 18 } 19 }) 20 } 21 </script> 22 </body> 23 </html>
2、cors简单的访问（views）
在访问其他域名的内容并执行完成后，返回一个响应头，响应头内有告知浏览器不进行Ajax的同源策略的方法。
1 from django.shortcuts import render,redirect,HttpResponse 2 import json 3 # Create your views here.def lsd_users(request): 4 user_list = [ 5 'alex', 'eric', 'egon' 6 ] 7 print('请求来了！') 8 user_list_str=json.dumps(user_list) 9 obj=HttpResponse(user_list_str) 10 obj['Access-Control-Allow-Origin']="http://www.s5.com:8100" 11 # 反会给浏览器已给响应头，告诉浏览器这个API不执行同源策略 12 return obj
3、cors复杂的访问（html）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="获取用户列表" onclick="getUsers()"> 9 <ul id="user_list"></ul> 10 <script src="/static/jquery-3.2.1.js"></script> 11 <script> 12 function getUsers() { 13 $.ajax({ 14 url:'http://www.s4.com:8010/new_users/', 15 type:'DELETE', 16 17 success:function (arg) { 18 console.log(arg) 19 } 20 }) 21 } 22 </script> 23 </body> 24 </html>
4、cors复杂的访问（views）
复杂的访问请求要先进行一个预检，看下什么样的请求方式和请求域名可以进行访问，返回给浏览器浏览器在判断是不是和预检的需求一致，如果一致就可以访问，再次返回给浏览器时设置响应头，响应头内有告知浏览器不进行Ajax的同源策略的方法。
1 from django.shortcuts import render,redirect,HttpResponse 2 import json 3 # Create your views here 4 def new_users(request): 5 print(request.method) 6 # 打印请求方式 7 user_list = [ 8 'alex', 'eric', 'egon' 9 ] 10 if request.method=='OPTIONS': 11 # 判断请方式是不是一种options请求 12 print('预检....') 13 obj=HttpResponse() 14 obj['Access-Control-Allow-Origin']='*' 15 # 所有域名的都可以进行访问 16 obj['Access-Control-Allow-Methods']='DELETE' 17 # 返回请求的方式,并告知浏览器不进行同源策略 18 return obj 19 obj = HttpResponse('asdfasdf') 20 # 再次请求来的时候返回内容 21 obj['Access-Control-Allow-Origin'] = "*" 22 # 允许所有的域名进行访问 23 return obj
end
