Django-解决跨域请求(基于js，jQuery的josnp，设置响应头的cors)
同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
url http ip port paht ? 数据
if 协议 IP PORT相同，同源
一，问题描述
1 django 创建2个项目 2 项目一，开启一个send_ajax请求 http://127.0.0.1:8000 3 访问正常 4 5 项目二，没有send_ajax请求 http://127.0.0.1:8010 6 那么这时候如果你通过ajax访问的 url:http://127.0.0.1:8000/send_ajax 7 浏览器会报错，内容是已拦截跨域请求，同源策略禁止读取位于http://127.0.0.1:8000/send_ajax远程资源，原因：cors头缺少 ‘Access-Control-Allow-Origin’
1.1 思考
jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。
1 跨域请求： 2 ajax请求一定会被拦截 3 4 核心任务：跨域请求的是数据，数据，数据 5 6 通过引入jquery cdn 可以跨域 我们想 是不是script标签不会被拦截呢？ 7 <script src=" https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
1.2跨域请求的演变
1 项目一 views 2 import json 3 def send_ajax(request): 4 return HttpResponse("yuan") # 第一次返回字符串 5 return HttpResponse("yuan()") # 第二次返回函数字符串 6 return HttpResponse("yuan('yuan')") # 第三次返回函数参数字符串 7 s='hello world' 8 return HttpResponse("yuan('%s')"%s) # 第四次返回函数字符串数据 9 10 s={"name":"egon","age":122} 11 return HttpResponse("%s('%s')"%(func_name,json.dumps(s))) # 第五次返回函数json字符串 12 13 项目二 html 14 第一次字符串，你要是知道数据是什么还请求干什么？所以这里只是个引子，告诉你可以这样做 15 <script>yuan</script> 16 <script src="http://127.0.0.1:8000/send_ajax"></script> 17 18 19 第二次函数字符串 20 <script>function yuan(){alert(123)}</script> 21 <script src="http://127.0.0.1:8000/send_ajax"></script> 22 23 24 第三次返回函数参数字符串 25 <script>function yuan(arg){alert(arg)}</script> 26 <script src="http://127.0.0.1:8000/send_ajax"></script> 27 28 29 第四次返回函数字符串数据（数据也是字符串） 30 <script>function yuan(arg){alert(arg)}</script> 31 <script src="http://127.0.0.1:8000/send_ajax"></script> 32 33 34 第五次返回函数json字符串 35 <script>function yuan(arg){alert(Json.parse(arg))}</script> 36 <script src="http://127.0.0.1:8000/send_ajax"></script>
1.3问题
1 我不能硬生生的将<script src="http://127.0.0.1:8000/send_ajax"></script>写在html里面，我需要动态创建下面的函数
我们通过触发点击事件函数创建
1 <script> 2 function yuan(arg) { 3 console.log(arg); 4 console.log(JSON.parse(arg)); 5 } 6 </script> 7 8 <script> 9 $(".send_ajax").click(function () { 10 kuayu_request("http://127.0.0.1:8000/send_ajax/") 11 }); 12 function kuayu_request(url) { 13 var $script=$("<script>"); // 创建script标签，是一个jquery对象： <script> 14 $script.attr("src",url); 15 $("body").append($script); 16 $("body script:last").remove(); 17 } 18 </script>
1.4 问题
1 1 问题函数名字是不是可以通过请求传送到后端呢？应该是同步的，可否通过回调函数？
可以通过发送请求的时候带着数据，数据包含你的函数名称，这样传到后端，再让后端返回你这个函数和数据，就可以执行了
1 项目二 html 2 <script> 3 $(".send_ajax").click(function () { 4 kuayu_request("http://127.0.0.1:8000/send_ajax/?callback=bar") 5 }); 6 function kuayu_request(url) { 7 var $script=$("<script>"); // 创建script标签，是一个jquery对象： <script> 8 $script.attr("src",url); 9 $("body").append($script); 10 $("body script:last").remove(); 11 } 12 </script> 13 14 15 项目一 views 16 def send_ajax(request): 17 func_name = request.GET.get('callback') 18 s = 'hello' 19 return HttpResponse("%s('%s')"%(func_name,json.dump(s)))
之前都是引子，下面才是真正的用法。。
ajax的跨域请求写法
1 <script> 2 3 $(".send_ajax").click(function () { 4 5 $.ajax({ 6 url:"http://127.0.0.1:8000/send_ajax/", 7 success:function (data) { 8 alert(data) 9 }, 10 // 跨域请求 <script> 告诉服务器我要什么类型的数据contenttype是告诉服务器我是什么类型数据 11 dataType:"jsonp", 12 jsonp: 'callbacks', //?callbacks=SayHi 相当于这个，问题就是在于前后端的函数名要相同 13 jsonpCallback:"SayHi" 14 }) 15 16 17 }); 18 19 function SayHi(arg) { 20 console.log("hello",arg) 21 } 22 </script> 23 24 {#// ==========================================基于jquery的JSONP的实现3 （推荐）#} 25 26 <script> 27 28 $(".send_ajax").click(function () { 29 30 $.ajax({ 31 url:"http://127.0.0.1:8000/send_ajax/", 32 dataType:"jsonp", // 跨域请求 <script> 33 // callbacks=? ？就是随机字符串了，后端传回来运行的就是success函数，也就是funciton 函数参数是数据 34 jsonp: 'callbacks', 35 success:function (data) { 36 console.log(data) 37 } 38 }) 39 40 }); 41 42 </script>
jsonp的所有实现和应用例子
项目一的views.py
1 import json 2 def send_ajax(request): 3 s={"name":"egon","age":122} 4 return HttpResponse("list('%s')"%json.dumps(s))
项目二的index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 7 </head> 8 <body> 9 <h1>项目2的首页</h1> 10 <button class="send_ajax">send_ajax</button> 11 12 13 {#// ==========================================基于JS的JSONP的实现#} 14 <script> 15 function bar(arg) { 16 console.log(arg); 17 console.log(JSON.parse(arg)); 18 } 19 </script> 20 21 <script> 22 23 $(".send_ajax").click(function () { 24 kuayu_request("http://127.0.0.1:8000/send_ajax/?callback=bar") // 回调函数 25 }); 26 // 创建script添加scr属性，获取数据 27 function kuayu_request(url) { 28 var $script=$("<script>"); // 创建script标签，是一个jquery对象： <script> 29 $script.attr("src",url); 30 $("body").append($script); 31 $("body script:last").remove(); 32 } 33 34 </script> 35 36 37 <hr> 38 39 {#// ==========================================基于jquery的JSONP的实现1#} 40 41 42 <script> 43 44 $(".send_ajax").click(function () { 45 // getJSON帮助我们创建了script标签和src属性 ，还有个参数，data= 可以写入一些给后端的字符串 46 // 匿名函数，函数会有getJSON创建随机字符串也就是callbacks=?的问好的值，函数参数的data是数据 47 $.getJSON("http://127.0.0.1:8000/send_ajax/?callbacks=?",function (data) { 48 console.log(data) 49 }) 50 }) 51 52 </script> 53 54 55 {#// ==========================================基于jquery的JSONP的实现2#} 56 57 <script> 58 59 $(".send_ajax").click(function () { 60 61 $.ajax({ 62 url:"http://127.0.0.1:8000/send_ajax/", 63 success:function (data) { 64 alert(data) 65 }, 66 // 跨域请求 <script> 告诉服务器我要什么类型的数据contenttype是告诉服务器我是什么类型数据 67 dataType:"jsonp", 68 jsonp: 'callbacks', //?callbacks=SayHi 相当于这个，问题就是在于前后端的函数名要相同 69 jsonpCallback:"SayHi" 70 }) 71 72 73 }); 74 75 function SayHi(arg) { 76 console.log("hello",arg) 77 } 78 </script> 79 80 {#// ==========================================基于jquery的JSONP的实现3 （推荐）#} 81 82 <script> 83 84 $(".send_ajax").click(function () { 85 86 $.ajax({ 87 url:"http://127.0.0.1:8000/send_ajax/", 88 dataType:"jsonp", // 跨域请求 <script> 89 // callbacks=? ？就是随机字符串了，后端传回来运行的就是success函数，也就是funciton 函数参数是数据 90 jsonp: 'callbacks', 91 success:function (data) { 92 console.log(data) 93 } 94 }) 95 96 }); 97 98 99 </script> 100 101 {#// =========================================应用#} 102 103 104 <script> 105 106 $(".send_ajax").click(function () { 107 108 $.ajax({ 109 url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403", 110 dataType:"jsonp", 111 jsonp:"callback", 112 jsonpCallback:"list" 113 }) 114 115 116 }); 117 118 function list(shuju) { 119 console.log(shuju.data); // {data: Array(7)} 120 var data=shuju.data; // [{},{},{},......] 121 122 $.each(data,function (i,weekend) { 123 //console.log(weekend); // {week: "周日", list: Array(19)} 124 console.log(weekend.list); // {week: "周日", list: Array(19)} 125 var week= weekend.week; 126 $("body").append("<div>"+week+"</div>"); 127 128 $.each(weekend.list,function (i,show) { 129 console.log(show); // {time: "1800", name: "《都市现场》90分钟直播版块", link: "http://www.jxntv.cn/live/jxtv2.shtml"} 130 131 var $a=$("<a>"); // <a></a> 132 $a.html(show.name); 133 $a.attr("href",show.link); 134 135 $("body").append('<p>'); 136 $("body").append($a); 137 $("body").append('</p>'); 138 139 }) 140 141 142 }) 143 144 } 145 </script> 146 </body> 147 </html>
注意 JSONP一定是GET请求
CORS跨域资源共享（CORS，Cross-Origin Resource Sharing）
其本质是设置响应头，使得浏览器允许跨域请求。
项目一要访问项目二的视图，项目二的ajax请求代码如下
1 <h1>项目2的首页cors</h1> 2 3 <button class="send_ajax">send_ajax</button> 4 5 <script> 6 7 $(".send_ajax").click(function () { 8 9 $.ajax({ 10 // 这里我访问s1的的send_ajax 11 url:"http://127.0.0.1:8000/send_ajax/", 12 type:'GET', // head get post put delete 13 success:function (data) { 14 console.log(data); 15 console.log('11') 16 } 17 }) 18 19 }) 20 </script>
项目二通过路由找到视图返回数据的代码如下
1 import json 2 def send_ajax(request): 3 # 授权的origin可以用*代替所有，methods可以多个，用逗号分开，简单的放一起，复杂放一起 4 if request.method == "OPTIONS": # 预检 5 response = HttpResponse() 6 7 response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8011" 8 response["Access-Control-Allow-Methods"] = "PUT" 9 10 return response 11 12 elif request.method == "PUT": # 复杂请求，需要通过预检 put delete 13 s = {"name": "egon", "age": 122} 14 15 response = HttpResponse(json.dumps(s)) 16 response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8011" 17 18 return response 19 20 elif request.method == 'GET': # 简单强求 head get post 21 s = {"name": "egon", "age": 122} 22 23 response = HttpResponse(json.dumps(s)) 24 response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8011" 25 26 return response
流程：
项目二向项目一发送请求，项目一根据请求匹配路由规则，找到视图，视图首先返回给浏览器，如果没有cors就会被浏览器拦截，有了cors设置，浏览器就不会拦截cors设置的请求方式，最终
返回给项目一的数据，上述例子中，复杂请求（put，delete）先走预检，添加put请求，和允许访问的url，返回给浏览器，浏览器得到后在向服务器发送put请求，拿到数据，最后给项目一。
