跨域相關問題

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

任何一個不知足上述要求的請求，即會被認爲是複雜請求~~

複雜請求會先發出一個預請求，咱們也叫預檢，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測試前端代碼

 

JsonP解決跨域只能發送get請求，而且實現起來須要先後端交互比較多

添加響應頭

from django.utils.deprecation import MiddlewareMixin


class MyCore(MiddlewareMixin):
    def process_response(self, request, response):
        response["Access-Control-Allow-Origin"] = "*"
        if request.method == "OPTIONS":
            response["Access-Control-Allow-Headers"] = "Content-Type"
            response["Access-Control-Allow-Methods"] = "DELETE, PUT, POST"
        return response

中間件加響應頭