1. 程式人生 > >jsonp原理,跨域請求頭處理

jsonp原理,跨域請求頭處理

.jsonp(解決跨域)思路介紹:

因瀏覽器的同源策略不會攔截link標籤內的src請求,所以利用這一點,我們把後端開放的介面路徑放在src,

其在傳送請求後會自動接收返回的東西,所以我們可以給要返回的內容進行特殊的處理;具體做法:

1. 使用個變數加括號的形式,把要返回的內容放入括號內

       列如: return HttpResponse( "handlerResponse('返回內容')" )

2. html頁面script標籤對內放置個函式,讓函式名等同於後端傳來的變數名即可

 function handlerResponse(data) {   # data引數接收的就是後端真正想要返回的內容

.

    // do something....

    alert(data)

}

3. 原理: 前端src出接收到的內容就是handlerResponse('返回內容')這種形式,html頁面內又定義了

   handlerResponse為一個函式名,加括號就是呼叫的形式,正好會把其所要傳送的東西以引數的形式被

   data所接收,此時在函式內操作處理即可.

缺點: jsonp只能傳送get請求,無法處理post請求,get請求時無法指定

contentytype

 

.加請求頭方式:

我們先了解下跨域請求的分類(簡單和複雜):

 

HTTP方法是下列方法之一

  HEADGETPOST

HTTP頭資訊不超出以下幾種欄位

  AcceptAccept-LanguageContent-LanguageLast-Event-ID

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

    application/x-www-from-urlencoded   # form表單提交資料

    multipart/form-data  # 許可權型別

    text/plain  # 文字型別

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

複雜請求會先發出一個預請求,我們也叫預檢,即OPTIONS請求~~

原理,在請求返回給瀏覽器前,給響應內容加上頭部資訊,讓瀏覽器放行即可.

 

from django.utils.deprecation import MiddlewareMixin
class MyCors(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"] = "PUT,PATCH,DELETE" # 複雜請求方式
        return response