Django-解决跨域请求(基于js，jQuery的josnp，设置响应头的cors)

同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

url http ip port paht ? 数据
　　if 协议 IP PORT相同，同源

一，问题描述

django 创建2个项目 
项目一，开启一个send_ajax请求  http://127.0.0.1:8000
访问正常

项目二，没有send_ajax请求  http://127.0.0.1:8010
那么这时候如果你通过ajax访问的 url:http://127.0.0.1:8000/send_ajax
浏览器会报错，内容是已拦截跨域请求，同源策略禁止读取位于http://127.0.0.1:8000/send_ajax远程资源，原因：cors头缺少 ‘Access-Control-Allow-Origin’

1.1 思考

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。

跨域请求：
      ajax请求一定会被拦截

核心任务：跨域请求的是数据，数据，数据

通过引入jquery cdn 可以跨域 我们想 是不是script标签不会被拦截呢？
<script src=" https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>

1.2跨域请求的演变

项目一 views
import json
def send_ajax(request):
    return HttpResponse("yuan")          # 第一次返回字符串
    return HttpResponse("yuan()")        # 第二次返回函数字符串   
    return HttpResponse("yuan('yuan')")   # 第三次返回函数参数字符串
    s='hello world'    
    return HttpResponse("yuan('%s')"%s)   # 第四次返回函数字符串数据
    
    s={"name":"egon","age":122}          
    return HttpResponse("%s('%s')"%(func_name,json.dumps(s))) # 第五次返回函数json字符串
    
项目二 html
第一次字符串，你要是知道数据是什么还请求干什么？所以这里只是个引子，告诉你可以这样做
<script>yuan</script>
<script src="http://127.0.0.1:8000/send_ajax"></script>


第二次函数字符串
<script>function yuan(){alert(123)}</script>
<script src="http://127.0.0.1:8000/send_ajax"></script>


第三次返回函数参数字符串
<script>function yuan(arg){alert(arg)}</script>
<script src="http://127.0.0.1:8000/send_ajax"></script>


第四次返回函数字符串数据（数据也是字符串）
<script>function yuan(arg){alert(arg)}</script>
<script src="http://127.0.0.1:8000/send_ajax"></script>


第五次返回函数json字符串
<script>function yuan(arg){alert(Json.parse(arg))}</script>
<script src="http://127.0.0.1:8000/send_ajax"></script>

1.3问题

我不能硬生生的将<script src="http://127.0.0.1:8000/send_ajax"></script>写在html里面，我需要动态创建下面的函数

   我们通过触发点击事件函数创建

<script>
    function yuan(arg) {
        console.log(arg);
        console.log(JSON.parse(arg));
    }
</script>

<script>
    $(".send_ajax").click(function () { 
       kuayu_request("http://127.0.0.1:8000/send_ajax/")
    });
    function kuayu_request(url) {
        var $script=$("<script>");  // 创建script标签，是一个jquery对象： <script>
        $script.attr("src",url);
        $("body").append($script);
        $("body script:last").remove();
    }
</script>

1.4 问题

1 问题函数名字是不是可以通过请求传送到后端呢？应该是同步的，可否通过回调函数？

　　可以通过发送请求的时候带着数据，数据包含你的函数名称，这样传到后端，再让后端返回你这个函数和数据，就可以执行了

项目二 html
<script>
    $(".send_ajax").click(function () { 
       kuayu_request("http://127.0.0.1:8000/send_ajax/?callback=bar")
    });
    function kuayu_request(url) {
        var $script=$("<script>");  // 创建script标签，是一个jquery对象： <script>
        $script.attr("src",url);
        $("body").append($script);
        $("body script:last").remove();
    }
</script>


项目一 views
def send_ajax(request):
    func_name = request.GET.get('callback')
    s = 'hello'
    return HttpResponse("%s('%s')"%(func_name,json.dump(s)))

之前都是引子，下面才是真正的用法。。

ajax的跨域请求写法

<script>

    $(".send_ajax").click(function () {

        $.ajax({
            url:"http://127.0.0.1:8000/send_ajax/",
            success:function (data) {
                alert(data)
            },
            // 跨域请求  <script>  告诉服务器我要什么类型的数据contenttype是告诉服务器我是什么类型数据
            dataType:"jsonp",
            jsonp: 'callbacks', //?callbacks=SayHi 相当于这个，问题就是在于前后端的函数名要相同
            jsonpCallback:"SayHi"
        })


    });

    function SayHi(arg) {
        console.log("hello",arg)
    }
</script>

{#// ==========================================基于jquery的JSONP的实现3 （推荐）#}

<script>

    $(".send_ajax").click(function () {

        $.ajax({
            url:"http://127.0.0.1:8000/send_ajax/",
            dataType:"jsonp",   // 跨域请求  <script>
            // callbacks=? ？就是随机字符串了，后端传回来运行的就是success函数，也就是funciton 函数参数是数据
            jsonp: 'callbacks',
            success:function (data) {
                console.log(data)
            }
        })

    });
    
</script>

jsonp的所有实现和应用例子

项目一的views.py

import json
def send_ajax(request):
    s={"name":"egon","age":122}
    return HttpResponse("list('%s')"%json.dumps(s))

项目二的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
</head>
<body>
<h1>项目2的首页</h1>
<button class="send_ajax">send_ajax</button>


{#// ==========================================基于JS的JSONP的实现#}
<script>
    function bar(arg) {
       console.log(arg);
       console.log(JSON.parse(arg));
    }
</script>

<script>

    $(".send_ajax").click(function () {
       kuayu_request("http://127.0.0.1:8000/send_ajax/?callback=bar")  // 回调函数
    });
    // 创建script添加scr属性，获取数据
    function kuayu_request(url) {
        var $script=$("<script>");  // 创建script标签，是一个jquery对象： <script>
        $script.attr("src",url);
        $("body").append($script);
        $("body script:last").remove();
    }

</script>


<hr>

{#// ==========================================基于jquery的JSONP的实现1#}


<script>

   $(".send_ajax").click(function () {
        // getJSON帮助我们创建了script标签和src属性 ，还有个参数，data= 可以写入一些给后端的字符串
       // 匿名函数，函数会有getJSON创建随机字符串也就是callbacks=?的问好的值，函数参数的data是数据
      $.getJSON("http://127.0.0.1:8000/send_ajax/?callbacks=?",function (data) {
         console.log(data)
      })
   })

</script>


{#// ==========================================基于jquery的JSONP的实现2#}

<script>

    $(".send_ajax").click(function () {

        $.ajax({
            url:"http://127.0.0.1:8000/send_ajax/",
            success:function (data) {
                alert(data)
            },
            // 跨域请求  <script>  告诉服务器我要什么类型的数据contenttype是告诉服务器我是什么类型数据
            dataType:"jsonp",   
            jsonp: 'callbacks', //?callbacks=SayHi 相当于这个，问题就是在于前后端的函数名要相同
            jsonpCallback:"SayHi"
        })


    });

    function SayHi(arg) {
        console.log("hello",arg)
    }
</script>

{#// ==========================================基于jquery的JSONP的实现3 （推荐）#}

<script>

    $(".send_ajax").click(function () {

        $.ajax({
            url:"http://127.0.0.1:8000/send_ajax/",
            dataType:"jsonp",   // 跨域请求  <script>
            // callbacks=? ？就是随机字符串了，后端传回来运行的就是success函数，也就是funciton 函数参数是数据
            jsonp: 'callbacks',  
            success:function (data) {
                console.log(data)
            }
        })

    });


</script>

{#// =========================================应用#}


<script>

    $(".send_ajax").click(function () {

        $.ajax({
            url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",
            dataType:"jsonp",
            jsonp:"callback",
            jsonpCallback:"list"
        })


    });

    function list(shuju) {
          console.log(shuju.data);  // {data: Array(7)}
          var data=shuju.data;    // [{},{},{},......]
           
          $.each(data,function (i,weekend) {
              //console.log(weekend);  // {week: "周日", list: Array(19)}
              console.log(weekend.list);  // {week: "周日", list: Array(19)}
              var week= weekend.week;
              $("body").append("<div>"+week+"</div>");

              $.each(weekend.list,function (i,show) {
                  console.log(show); // {time: "1800", name: "《都市现场》90分钟直播版块", link: "http://www.jxntv.cn/live/jxtv2.shtml"}

                  var $a=$("<a>");  // <a></a>
                  $a.html(show.name);
                  $a.attr("href",show.link);

                  $("body").append('<p>');
                  $("body").append($a);
                  $("body").append('</p>');

              })


          })

    }
</script>
</body>
</html>

 注意 JSONP一定是GET请求

CORS跨域资源共享（CORS，Cross-Origin Resource Sharing）

其本质是设置响应头，使得浏览器允许跨域请求。

项目一要访问项目二的视图，项目二的ajax请求代码如下

<h1>项目2的首页cors</h1>

<button class="send_ajax">send_ajax</button>

<script>

    $(".send_ajax").click(function () {

        $.ajax({
            // 这里我访问s1的的send_ajax
            url:"http://127.0.0.1:8000/send_ajax/",
            type:'GET',  // head get post put delete
            success:function (data) {
                console.log(data);
                console.log('11')
            }
        })

    })
</script>

项目二通过路由找到视图返回数据的代码如下

import json
def send_ajax(request):
    # 授权的origin可以用*代替所有，methods可以多个，用逗号分开，简单的放一起，复杂放一起
    if request.method == "OPTIONS":  # 预检
        response = HttpResponse()

        response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8011"
        response["Access-Control-Allow-Methods"] = "PUT"

        return response

    elif request.method == "PUT":   # 复杂请求，需要通过预检 put delete
        s = {"name": "egon", "age": 122}

        response = HttpResponse(json.dumps(s))
        response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8011"

        return response

    elif request.method == 'GET':    # 简单强求 head get post
        s = {"name": "egon", "age": 122}

        response = HttpResponse(json.dumps(s))
        response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8011"

        return response

流程：

项目二向项目一发送请求，项目一根据请求匹配路由规则，找到视图，视图首先返回给浏览器，如果没有cors就会被浏览器拦截，有了cors设置，浏览器就不会拦截cors设置的请求方式，最终

返回给项目一的数据，上述例子中，复杂请求（put，delete）先走预检，添加put请求，和允许访问的url，返回给浏览器，浏览器得到后在向服务器发送put请求，拿到数据，最后给项目一。