python 跨域處理方式

由於瀏覽器的同源策略限制,不是同源的腳本不能操做其餘源下面的資源,想操做另外一個源下面的資源就屬於跨域了,這裏說的跨域是廣義跨域,咱們常說的代碼中請求跨域,是狹義的跨域,即在腳本代碼中向非同源域發送http請求javascript

瀏覽器的同源策略(SOP/same origin policy)是瀏覽器最核心也最基本的安全功能,若是缺乏了同源策略,瀏覽器很容易受到XSS(跨站腳本攻擊 cross site scripting)和CSRF(跨站請求僞造cross-site request forgery)等攻擊。html

(同源 origin:協議,域名,端口號,不清楚的話,直接在瀏覽器控制檯中輸入window.location.origin看看返回值就知道了。)前端

下面兩種狀況,是不受跨域限制的,嚴格來說,這兩種狀況只是跨站資源請求:java

  1)頁面中的連接,重定向及表單提交是不受同源策略限制的python

  2)跨域資源的引入,如<script src=""> <image src=""> <iframe>等web

從上面的第二種狀況,咱們能夠發現,但凡經過src去獲取非同源狀態的資源時,都是不受跨域限制的,那咱們就能夠想一想,是否能夠藉助這種跨站資源請求的方式來實現http跨域請求呢?這就是咱們接下來要說的第一種跨域解決方案:jsonpajax

一、JSONP(不只限於python,全部的GET請求均可以使用jsonp實現跨域)json

  1)實現原理:跨域

    從上面的分析咱們已經知道,web頁面上請求跨站資源請求是不會受到同源策略限制的,全部咱們會想,咱們可不能夠在服務器上想辦法把web端須要的數據裝進一個js文件裏面,而後讓web端直接訪問這個js文件,從而獲取須要的數據呢?恰巧咱們知道有一種叫作json的數據格式,且js原生支持,因此web端就能夠經過像訪問js腳本同樣的方式,來調用跨域服務器上動態生成的js文件。瀏覽器

    爲了便於客戶端使用數據,逐漸造成一種非正式傳輸協議:JSONP。JSONP的一個要點就是,傳給服務器一個callback參數,而後服務器返回數據時,將這個callback參數做爲函數名來包裹住json數據

  2)jsonp實例

    在遠程服務器上新建一個remote.js文件:

    HandleRemote({"title":"哈哈", "name":"我是一個測試數據哦!"})

 

    在本地新建html文件:

    function HandleRemote(data){

      console.log(data.title+data.name);

    }

    <script type="text/javascript" src="遠程服務器地址/remote.js">

    運行本地文件,在瀏覽器的控制檯能夠看到 哈哈我是一個測試數據哦! 的輸出

    到如今咱們已經實現了去服務器上獲取數據,剩下還有兩個問題須要咱們思考:

    a、咱們如何讓遠程服務器知道他要調用的本地函數回調函數的名字是什麼?

    b、咱們如何在遠程服務器上動態生成js腳本

    有了思路就很好辦了,先看第一個問題:

    咱們如何讓服務器知道咱們本地的回調函數名?告訴他就好了啊,在請求中加上咱們的函數名,而後讓遠程服務器根據咱們的參數取動態生成js腳本調用函數名便可!

    前端實現

    var url = "http://test.com/getRemoteDate?callback=HandleRemote"

    var script = document.createElement("script");

    script.setAttribute("src", url)

    document.getElementByTagName("head")[0].appendChild(script);

 

    最後將上面的代碼封裝成通用的ajax形式:

    url = "http://test.com/getRemoteDate/";

    $.ajax({

      url:url,

      type:"GET",

      dataType:"JSONP",

      jsonp:"callback", #將會做爲參數傳給服務器,用於得到回調函數的參數名

      jsonCallback:"test", # 自定義的jsonp的回調函數參數名,默認爲jQuery自動生成的函數名,也能夠自定義,jQuery會自動爲你處理的。

      success:function(data){

        此處data即爲返回的json數據了,前端根據須要自行處理

      } 

    });

    服務端代碼

    def getData():

      return {"title":"哈哈", "name":"這又是一個測試數據哦!"}

    def getRemote(request):

      funcName = request.GET.get("callback")

      result = getData()

      # 將結果以json形式返回,與前端的jsonp交互

      return funcName+"("+json.dumps(result)+")"

 

    配置url: url(r"^getRemoteData/$", getRemote)

 

    到這裏,jsonp就完成了,雖然jsonp不受同源策略的限制,可是jsonp有個問題,就是它只支持GET請求,其餘請求不支持。

二、在響應頭加上響應的容許跨域的參數,告訴瀏覽器當前請求被服務器接受,這種跨域方式也是通用的。

  

 

三、python Django中最經常使用的另外一種處理跨域的方式:

  使用Django提供的 Django-cors-headers 來處理跨域

  從GitHub上面下載Django-cors-headers

  pip install Django-cors-headers.zip

  在settings.py中的中間件中配置 【'corsheaders.middleware.CorsMiddleware',】記得這個中間件必定要寫在CSRF以前,爲了方便處理,通常寫在最前面

  設置 CORS_ORIGIN_ALLOW_ALL = True,即容許全部的跨域請求,固然,這裏也能夠設置爲False,而後配合 CORS_ORIGIN_WHITELIST 白名單來使用

  如此,咱們的跨域處理即完成,支持全部的請求。

相關文章
相關標籤/搜索