同源策略jsonp和cors

時間 2019-11-30

標籤同源策略 jsonp cors 欄目 JSON 简体版

原文原文鏈接

同源策略:

同源策略(Same origin policy)是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。html

同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。

項目1

=================http://127.0.0.1:8001項目的index============
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button>ajax</button>
{% csrf_token %}

<script>
    $("button").click(function(){
        $.ajax({
            url:"http://127.0.0.1:8002/SendAjax/",
            type:"POST",
            data:{"username":"man","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(123);
                alert(data);
            }
        })
    })
</script>
</body>
</html>

項目2前端

==================http://127.0.0.1:8002項目的index================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button>sendAjax</button>
{% csrf_token %}

<script>
    $("button").click(function(){
        $.ajax({
            url:"/SendAjax/",
            type:"POST",
            data:{"username":"man","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(data)
            }
        })
    })
</script>

</body>
</html>


===================http://127.0.0.1:8002項目的views====================

def index(request):
    return render(request,"index.html")
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def SendAjax(request):    # 不校驗csrf_token
    import json
    return HttpResponse(json.dumps("hello2"))

當點擊項目1的按鈕時，發送了請求，可是會發現報錯以下：jquery

已攔截跨源請求：同源策略禁止讀取位於 http://127.0.0.1:8002/SendAjax/ 的遠程資源。（緣由：CORS 頭缺乏 'Access-Control-Allow-Origin'）

如何解決同源策略實現跨域請求

使用script標籤來完成跨域請求原理是經過script標籤的跨域特性來繞過同源策略。

# =============================http://127.0.0.1:8001/index

<button>ajax</button>
{% csrf_token %}

<script>
    function func(name){
        alert(name)
    }
</script>

<script src="http://127.0.0.1:8002/SendAjax/"></script>


# =============================http://127.0.0.1:8002/
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):
    import json
    # dic={"k1":"v1"}
    return HttpResponse("func('param')")  # return HttpResponse("func('%s')"%json.dumps(dic))

使用jsonp來實現跨域請求

================http://127.0.0.1:8001/index===

<button class="get_index" onclick=f()>洗剪吹</button>
<srcipt>

function ret(arg) {
　　console.log(arg)
}

$(".get_index").click(function () {
             $.ajax({
                 url:"http://127.0.0.1:8002/index/",
                 type:"get",
                 dataType:"jsonp",     // 僞造ajax  基於script
                 jsonp: 'callbacks',
                 //jsonpCallback:"ret",
                 success:function (data) {
                     console.log(data)
                 }
             })
         })
</srcipt>


=================127.0.0.1:8002/index====

def index(request):  # jsonp

    func=request.GET.get("callbacks")
    # print("func",func)
    info={"name":"man","age":34,"price":200}
    return HttpResponse(" ('%s')"%(func,json.dumps(info)

jsonp: 'callbacks'就是定義一個存放回調函數的鍵，jsonpCallback是前端定義好的回調函數方法名'ret'，server端接受callback鍵對應值後就能夠在其中填充數據打包返回了; ajax

jsonpCallback參數能夠不定義，jquery會自動定義一個隨機名發過去，那前端就得用回調函數來處理對應數據了。利用jQuery能夠很方便的實現JSONP來進行跨域訪問。django

jsonp應用

$(".get_index").click(function () {
         $.ajax({
             url:"http://www.jxntv.cn/data/jmd-jxtv2.html",
             type:"get",
             dataType:"jsonp",     // 僞造ajax  基於script
             jsonp: 'callbacks',
             jsonpCallback:"list",
             success:function (data) {
                 //console.log(data.data);
                 var html="";
                 $.each(data.data,function (index,weekday) {
                 console.log(weekday);     // {week: "週一", list: Array(19)}
                 html+='<p>'+weekday.week+'</p>';
                 $.each(weekday.list,function (j,show) {
                        html+= '<p><a href='+show.link+'>'+show.name+'</a></p>'
                     })
                 });
                 $("body").append(html)
             }
         })
        })

使用cors來實現跨域請求

CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。json

整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。跨域

所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。瀏覽器

============127.0.0.1:8001=====
    $(".get_service").click(function () {
             $.ajax({
             url:"http://127.0.0.1:8008/service/",
             success:function (data) {
                 console.log(data)
             }
         })
        })

==============127.0.0.1:8002======
    def service(request):
        info = {"k1":"v1","k2":"v2"}
        responce = HttpResponce(json.dumps(info))
        responce["Access-Control-Allow-Origin"] = "http://127.0.0.1:8001"
        responce["Access-Control-Allow-Origin"] = "*"      #表示全部訪問經過
        return responce