跨域中間件文件

JsonP解決

• 客戶端

1. 通過js代碼動態script標簽，將請求生成src
2. 定義一個回調函數

• 服務端

1. 獲取到回調函數名
2. 返回數據格式：函數名(數據）

<div>
<input type='button' onclick='get_data'   value="點擊獲取">
</div>


<script>

function get_data(){
    // 發送一個jsonp請求
        var tag = document.createElement('script');
        tag.src = "http://www.baidu.com/data.html?callback=list"
        document.head.appendChild(tag);
        document.head.removed(tag);    // 發送請求完後動態刪除標簽
    }

// 定義一個和callback函數名一樣的函數
function list(arg){

    console.log(arg)
    
    }

</script>
 

CORS

CORS即Cross Origin Resource Sharing 跨域資源共享，

那麽跨域請求還分為兩種，一種叫簡單請求，一種是復雜請求~~

• 簡單請求
  HTTP方法是下列方法之一

　　HEAD， GET，POST

HTTP頭信息不超出以下幾種字段

　　Accept， Accept-Language， Content-Language， Last-Event-ID

　　Content-Type只能是下列類型中的一個

　　　　application/x-www-from-urlencoded

　　　　multipart/form-data

　　　　text/plain

任何一個不滿足上述要求的請求，即會被認為是復雜請求~~【 json格式的數據就是一個負責請求】

復雜請求會先發出一個預請求，我們也叫預檢，OPTIONS請求~~

瀏覽器的同源策略

跨域是因為瀏覽器的同源策略導致的，也就是說瀏覽器會阻止非同源的請求~~

那什麽是非同源呢 即域名不同，端口不同都屬於非同源的~~

瀏覽器只阻止表單以及ajax請求，並不會阻止src請求，所以我們的cnd，圖片等src請求都可以發~~

• JSONP

jsonp的實現原理是根據瀏覽器不阻止src請求入手~來實現的~~

• 後端

class Test(APIView):

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

• 前端

 <button id="btn_one">點擊我向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>

• ** JsonP解決跨域只能發送get請求，並且實現起來需要前後端交互比較多。**

• CORS

就是服務端添加響應頭response["Access-Control-Allow-Origin"] = "*"，如果是復雜請求，會先發option請求預檢

• django可以在中間件中實現,自定義一個中間件，然後去setting中註冊

    
from django.utils.deprecation import MiddlewareMixin


class ExemptAllowOriginMiddleware(MiddlewareMixin):
    """解決跨域，添加一個響應頭"""

    def process_reponse(self, request, response):
        response["Access-Control-Allow-Origin"] = '*'
        if request.method == 'OPTIONS':
            # 本質是在請求頭裏加上一個請求頭，ajax中header對應的字典裏的字段
            response['Access-Control-Allow-Headers'] = "Content-Type"
            response['Access-Control-Allow-Methods'] = "POST,PUT,PATCH,DELETE"
            return response

跨域兩種方案