1.同源策略

　　同源策略是瀏覽器的一個安全功能,不同源的客戶端腳本在沒有明確授權的情況下,不能讀寫對方資源,

　　即協議不同,域名不同或者端口不同的都是非同源的

　　瀏覽器只阻止表單以及 ajax 請求,并不會阻止 src 請求,所以能訪問cnd,圖片等 src 請求

　　2.簡單/復雜請求

　　簡單請求定義

　　只能使用get/post/head請求方式

　　HTTP 頭信息不超出以下幾種字段Accept, Accept-Language,Content-Language, Last-Event-ID

　　Content-Type只能是text/plain,multipart/form-data,application/x-www-from-urlencoded

　　請求中的任意XMLHttpRequestUpload 對象均沒有注冊任何事件監聽器 (未驗證),MLHttpRequestUpload 對象可以使用 XMLHttpRequest.upload 屬性訪問

　　注意

　　任何一個不滿足上述要求的請求,即會被認為是復雜請求

　　3.CORS

　　跨域資源共享 (Cross Origin Resource Sharing)

　　跨域資源共享標準新增了一組 HTTP 首部字段,允許服務器聲明哪些源站通過瀏覽器有權限訪問哪些資源,另外,規范要求,對那些可能對服務器數據產生副作用的 HTTP 請求方法,(特別是GET以外的 HTTP 請求，或者搭配某些 MIME 類型的POST請求,瀏覽器必須首先使用OPTIONS方法發起一個預檢請求(preflight request),從而獲知服務端是否允許該跨域請求,服務器確認允許之后,才發起實際的 HTTP 請求.在預檢請求的返回中,服務器端也可以通知客戶端,是否需要攜帶身份憑證

　　4.如何解決實現CORS

　　1.jsonp

　　Jsonp(JSON with Padding) 是 json 的一種"使用模式",可以讓網頁從別的域名(網站)那獲取資料,即跨域讀取數據。

class Test(APIView):

    def get(self, request):
        callback = request.query_params.get("callback", "")
        ret = callback + "(" + "'success'" + ")"
        return HttpResponse(ret)

<button>點擊我向JsonP1發送請求</button>
<script>
    // 測試發送請求失敗 跨域不能得到數據
    $('#btn_one').click(function () {
        $.ajax({
            url: "http://127.0.0.1:8000/jsonp1",
            type: "get",
            success: function (response) {
                console.log(response)
            }
        })
    });
    
    function handlerResponse(response) {
        alert(response)
    };
    
    window.onload = function () {
        $("#btn_one").click(function () {
            let script_ele = document.createElement("script");
            script_ele.src = "http://127.0.0.1:8000/jsonp1?callback=handlerResponse";
            document.body.insertBefore(script_ele, document.body.firstChild);
        })
    }


</script>

<button>點擊我向JsonP1發送請求</button>
<script>
    // 測試發送請求失敗 跨域不能得到數據
    $('#btn_one').click(function () {
        $.ajax({
            url: "http://127.0.0.1:8000/jsonp1",
            type: "get",
            success: function (response) {
                console.log(response)
            }
        })
    });
    
    function handlerResponse(response) {
        alert(response)
    };
    
    window.onload = function () {
        $("#btn_one").click(function () {
            let script_ele = document.createElement("script");
            script_ele.src = "http://127.0.0.1:8000/jsonp1?callback=handlerResponse";
            document.body.insertBefore(script_ele, document.body.firstChild);
        })
    }


</script>

上一篇

104協議怎么操作

下一篇

idea配置maven倉庫怎么操作