同源策略和Jsonp、CORS跨域

時間  2019-11-16
標籤 同源 策略 jsonp cors 欄目 JSON 简体版
原文   原文鏈接

1、同源策略

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

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

一、跨域示例

端口8006：點擊按鈕跨域訪問

############# urls #############
from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('service/', views.service),
]

############# 視圖 #############
from django.shortcuts import render, HttpResponse
# Create your views here.

def index(request):
    return render(request, "index.html")

def service(request):
    return HttpResponse("技師alex")

############# index.html #############
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>INDEX</h3>
<button class="get_service">洗剪吹</button>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $(".get_service").click(function () {
        $.ajax({
             // url: "/service/",
            url: "http://127.0.0.1:8008/service/",   // 跨域訪問
            success:function(data){
                console.log(data);
            }
        })
    })
</script>
</body>
</html>

端口8008：點擊按鈕同域訪問

############# urls #############
from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('service/', views.service),
]

############# 視圖 #############
from django.shortcuts import render, HttpResponse
# Create your views here.

def index(request):
    return render(request, "index.html")

def service(request):
    print("技師egon")
    return HttpResponse("技師alex")

############# index.html #############
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>INDEX</h3>
<button class="get_service">洗剪吹</button>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $(".get_service").click(function () {
        $.ajax({
             url: "/service/",
            success:function(data){
                console.log(data);
            }
        })
    })
</script>
</body>
</html>

測試驗證：

（1）跨域訪問報錯html

（2）同域訪問正常前端

（3）跨域訪問雖然被攔截了，可是目標服務視圖函數有執行打印。說明跨域時，請求能夠發送過去，可是返回給瀏覽器時被攔截。vue

　　

　　項目2中的訪問已經發生了，說明是瀏覽器對非同源請求返回的結果作了攔截。java

二、script標籤的跨域特性

思考：這算怎麼回事？python

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

script標籤自己就能夠訪問其它域的資源，不受瀏覽器同源策略的限制，能夠經過在頁面動態建立script標籤。jquery

src：該屬性指定外部JavaScript文件的地址，能夠跨域。若是指定了該屬性，那麼script標籤中的內容就會被忽略。ios

2、Jsonp

　　JSONP(JSON with Padding)是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略，通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。ajax

一、藉助script標籤實現跨域請求

（1）發送跨域請求並處理

端口8006發送跨域請求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>INDEX</h3>
<button class="get_service">洗剪吹</button>
<script>
    function egon(arg) {
        console.log(arg);
        console.log(typeof arg);
        var data = JSON.parse(arg);
        console.log(data);
        console.log(typeof data);
    }
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://127.0.0.1:8008/service/"></script>

<script>
    // $(".get_service").click(function () {
    //     $.ajax({
    //          // url: "http://127.0.0.1:8006/service/",
    //         url: "http://127.0.0.1:8008/service/",
    //         success:function(data){
    //             console.log(data);
    //         }
    //     })
    // })
</script>
</body>
</html>

端口8008處理請求返回數據：

def service(request):
    print("技師egon")
    info = {"name": "egon", "age": 34, "price": 200}
    return HttpResponse("egon('%s')" % json.dumps(info))

（2）顯示效果

訪問127.0.0.1:8006/index，瀏覽器控制檯輸出以下：

訪問127.0.0.1:8008/index，並點擊按鈕，瀏覽器控制檯輸出以下：

（3）示例現象總結

　　這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：建立一個回調函數，而後在遠程服務上調用這個函數而且將JSON 數據形式做爲參數傳遞，完成回調。

　　將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。

　　通常狀況下，咱們但願這個script標籤可以動態的調用，而不是像上面由於固定在html裏面因此沒等頁面顯示就執行了，很不靈活。咱們能夠經過javascript動態的建立script標籤，這樣咱們就能夠靈活調用遠程服務了。

二、利用javascript動態建立script標籤實現跨域請求

<body>
<h3>INDEX</h3>
<button class="get_service">洗剪吹</button>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    function egon(arg) {
        console.log(arg);
        console.log(typeof arg);
        var data = JSON.parse(arg);
        console.log(data);
        console.log(typeof data);
    }

    function get_jsonp_data(url) {
        // DOM操做建立一個script標籤
        var ele_script = $("<script>");
        ele_script.attr("src", url);
        ele_script.attr("class", "jsonp");  // 給script標籤添加class="jsonp"屬性
        $("body").append(ele_script);
        $("#jsonp").remove();   // 刪除剛剛建立的script標籤
    }

    $(".get_service").click(function () {
        get_jsonp_data("http://127.0.0.1:8008/service/");
    })
</script>
</body>
注意：

（1）客戶端函數名必須和服務端函數名保持一致，缺少靈活性

　　function egon(arg){}函數名必須和8008的service視圖中HttpResponse("egon('%s')" % json.dumps(info))保持一致

def service(request):
    print("技師egon")
    info = {"name": "egon", "age": 34, "price": 200}
    return HttpResponse("egon('%s')" % json.dumps(info))

（2） 在客戶端定義的回調函數的函數名傳送給服務端，增長靈活性

8006端口index.html修改點擊事件：

$(".get_service").click(function () {
    get_jsonp_data("http://127.0.0.1:8008/service/?callbacks=alex");
})

　　習慣上把這個get方法提交的數據命名爲callbacks告訴其餘人這是回調函數名。這裏將函數名修改成了alex，對應的函數名也要修改成相同名稱：

function alex(arg) {
        console.log(arg);
        console.log(typeof arg);
        var data = JSON.parse(arg);
        console.log(data);
        console.log(typeof data);
    }

8008端口視圖修改以下：

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

（3）經過DOM操做建立並刪除script標籤

function get_jsonp_data(url) {
    // DOM操做建立一個script標籤
    var ele_script = $("<script>");
    ele_script.attr("src", url);
    ele_script.attr("class", "jsonp");  // 給script標籤添加class="jsonp"屬性
    $("body").append(ele_script);
    $("#jsonp").remove();   // 刪除剛剛建立的script標籤
}

　　這樣點擊按鈕，生成的script標籤會立馬刪除，可是跨域請求已經發送完成。

3、jQuery對JSONP的實現

一、getJSON

jQuery框架也固然支持JSONP，可使用$.getJSON(url,[data],[callback])方法.

8001的html改成：

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

<script>
　　function f(){
　　　　$.getJSON("http://127.0.0.1:8008/service/?callbacks=?",function(arg){
　　　　　　alert("hello"+arg)
　　　　});
　　}
</script>

8002的views不改動。

　　結果是同樣的，要注意的是在url的後面必須添加一個callback參數，這樣getJSON方法纔會知道是用JSONP方式去訪問服務，callback後面的那個問號是內部自動生成的一個回調函數名。

      此外，若是說咱們想指定本身的回調函數名，或者說服務上規定了固定回調函數名該怎麼辦呢？咱們可使用$.ajax方法來實現

二、$.ajax（用jquery封裝，利用script標籤模擬ajax請求）

8006的index.html改成：

<script>
    function alex(arg) {
        console.log(arg);
        console.log(typeof arg);
        var data = JSON.parse(arg);
        console.log(data);
        console.log(typeof data);
    }

    $(".get_service").click(function () {
        $.ajax({
            url: "http://127.0.0.1:8008/service/",
            type: "get",
            dataType: 'jsonp',   // 僞ajax, 基於script標籤建立
            jsonp: "callbacks",  // 請求的鍵
            jsonpCallback: "alex"   // 請求的值,具體函數的名字
        })
    })
</script>

注意：

（1）利用script標籤發送請求，所以只能是get請求。 JSONP必定是GET請求。

（2）將ajax請求中的dataType屬性設置爲「jsonp」，jsonp是專門用來解決跨域訪問而誕生的。

（3）8008的views不須要改動。

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

經過回調函數來處理（簡化形式）

<script>
    $(".get_service").click(function () {
        $.ajax({
            url: "http://127.0.0.1:8008/service/",
            type: "get",
            dataType: 'jsonp',   // 必須有，告訴server，此次訪問要的是一個jsonp的結果。
            jsonp: "callbacks",   //jQuery幫助隨機生成的：callbacks="隨機函數名"
            // jsonpCallback: "alex"   // 請求的值,具體函數的名字
            success: function (data) {
                console.log(data);
            }
        })
    })
</script>

 注意：

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

（2）隨機生成的函數名以下所示：

三、應用示例

有亂碼頁面以下所示：

　　

獲取該頁面數據處理以下：

body>
<h3>INDEX</h3>
<button class="get_service">洗剪吹</button>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>
    // 應用
    $(".get_service").click(function () {
        $.ajax({
            url: "http://www.jxntv.cn/data/jmd-jxtv2.html",
            type: "get",
            dataType: 'jsonp',   // 必須有，告訴server，此次訪問要的是一個jsonp的結果。
            jsonp: "callbacks",   //jQuery幫助隨機生成的：callbacks="隨機函數名"
            jsonpCallback: "list",
            success: function (data) {
                console.log(data);
                
                // 處理數據
                var html = "";
                $.each(data.data, function (index, weekday) {
                    console.log(weekday);   // { week:"週日", list: Array(19) }
                    // 構建p標籤,取到週一到週日
                    html += "<ul>"+weekday.week+"</ul>";

                    // 循環處理list: Array(19), 列表中每一條數據格式：{time: "0030", name: "通宵劇場六集連播", link: "http://www.jxntv.cn/live/jxtv2.shtml"}
                    $.each(weekday.list, function (j, show) {   // show是一個個字典
                        html += "<li><a href="+show.link+">"+show.name+"</a>"+
                            "  <span>"+show.time+"</span></li>";
                    })
                });

                // 將p標籤添加到頁面body中
                $("body").append(html);
            }
        })
    })
</script>
</body>

點擊按鈕後，頁面顯示以下：

　　

4、CORS(跨域資源共享)

　　隨着技術的發展，如今的瀏覽器能夠支持主動設置從而容許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設置響應頭，使得瀏覽器容許跨域請求。

　　跨域請求分爲兩種：簡單請求、複雜請求。

一、簡介

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

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

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

二、瀏覽器同源策略

　　跨域主要是因爲瀏覽器的同源策略致使，也就是說瀏覽器會阻止非同源的請求。

　　定義非同源：域名不一樣 或 端口不一樣。

　　瀏覽器只阻止表單及ajax請求，並不會阻止src請求(cdn、圖片等src請求)。

三、cors示例

（1）8006端口index.html，執行跨域請求

<button class="get_service">洗剪吹</button>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>
    // cors
    $('.get_service').click(function () {
        $.ajax({
            url:'http://127.0.0.1:8008/service/',
            success:function (data) {
                console.log(data);
            }
        })
    })
</script>

（2）點擊按鈕後，瀏覽器報錯：（Firefox瀏覽器報錯信息已經自動翻譯爲中文）

（3）在服務端8008視圖函數中添加響應頭：

def service(request):
    info = {"name": "egon", "age": 34, "price": 200}
    response = HttpResponse(json.dumps(info))

    # 添加響應頭，告訴瀏覽器不要攔截了
    response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8006"
    
    # 都不攔截了，任何人均可以訪問
    # response['Access-Control-Allow-Origin'] = "*"
    return response

　　添加後，點擊按鈕跨域訪問再也不報錯：

　　

四、兩種跨域請求

　　瀏覽器將CORS請求分紅兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

（1）簡單請求與非簡單請求區分標準

　　只要同時知足如下兩大條件，就屬於簡單請求。

（1) 請求方法是如下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出如下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

　　凡是不一樣時知足上面兩個條件，就屬於非簡單請求。

（2）瀏覽器對兩種請求的處理

　　瀏覽器對這兩種請求的處理，是不同的。

* 簡單請求和非簡單請求的區別？

   簡單請求：一次請求
   非簡單請求：兩次請求，在發送數據以前會先發一次請求用於作「預檢」，只有「預檢」經過後纔再發送一次請求用於數據傳輸。
* 關於「預檢」

- 請求方式：OPTIONS
- 「預檢」其實作檢查，檢查若是經過則容許傳輸數據，檢查不經過則再也不發送真正想要發送的消息
- 如何「預檢」
     => 若是複雜請求是PUT等請求，則服務端須要設置容許某請求，不然「預檢」不經過
        Access-Control-Request-Method
     => 若是複雜請求設置了請求頭，則服務端須要設置容許某請求頭，不然「預檢」不經過
        Access-Control-Request-Headers

　　支持跨域，簡單請求

　　服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'

　　支持跨域，複雜請求

　　因爲複雜請求時，首先會發送「預檢」請求，若是「預檢」成功，則發送真實數據。

  • 「預檢」請求時，容許請求方式則需服務器設置響應頭：Access-Control-Request-Method
  • 「預檢」請求時，容許請求頭則需服務器設置響應頭：Access-Control-Request-Headers

五、用JSONP解決跨域

　　jsonp的實現原理是根據瀏覽器不阻止src請求（cdn、圖片等）來入手實現的。

　　json雖然能解決跨域，可是隻能解決get請求的跨域。而且實現起來須要先後端交互比較多。

（1）後端view.py

from django.shortcuts import render
from django.http import HttpResponse
from rest_framework.views import APIView
from rest_framework.response import Response

# Create your views here.


class DemoView(APIView):
    def get(self, request):
        res = "handlerResponse('跨域測試')"
        return HttpResponse(res)

（2）前端demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script>
        function handlerResponse(data) {   // 定義handlerResponse函數，避免找不到
            console.log(data)
        }
    </script>
    <!-- 使用src跨域 -->
    <script src="http://127.0.0.1:8000/demo/"></script>
</head>
<body>
<div id="app">

</div>
<script>
    const app = new Vue({
        el: "#app",
        mounted(){   // 鉤子函數
        }
    })
</script>

</body>
</html>

（3）顯示效果

　　

六、用中間件處理跨域問題（通用方法）

　　經過添加響應頭告訴瀏覽器不用攔截。

　　settings.py:

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'api.cors.CORSMiddleware'
]

　　建立該文件  應用名/cors.py:

from django.utils.deprecation import MiddlewareMixin

class CORSMiddleware(MiddlewareMixin):
    """自定義中間件"""
    def process_response(self, request, response):
        # 添加響應頭

        # 容許你的域名來獲取個人數據
        response['Access-Control-Allow-Origin'] = "*"
        # 容許你攜帶Content-Type請求頭,這裏不能寫*
        # response['Access-Control-Allow-Headers'] = "Content-Type"
        # 容許你發送GET/POST/DELETE/PUT
        # response['Access-Control-Allow-Methods'] = "GET, POST"

        if request.method == "OPTIONS":
            response["Access-Control-Allow-Header"] = "Content-Type"
        return response 

5、更多參考博客

Django-Ajax

Python開發【第十六篇】：AJAX全套

跨域

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程