ajax-解決跨域請求(基於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請求，拿到數據，最后給項目一。