跨域請求相關

時間  2019-12-04
標籤 請求 相關 简体版
原文   原文鏈接

說到跨域請求，咱們要先了解爲何須要跨域請求以及跨域請求的問題javascript

隨着先後端分離的浪潮來臨，愈來愈多的項目採用先後端分離的模式構建，從以前的一個服務器，到先後端各自的服務器，因此不一樣服務器就會出現數據的交互，就出現了跨域請求。html

說到跨域的問題，就要提到瀏覽器的同源策源。前端

同源策略

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。java

同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂 同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。 若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。

示例：

項目1:
複製代碼 
==================================http://127.0.0.1:8001項目的index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button>ajax</button> {% csrf_token %} <script> $("button").click(function(){ $.ajax({ url:"http://127.0.0.1:7766/SendAjax/", type:"POST", data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()}, success:function(data){ alert(123); alert(data) } }) }) </script> </body> </html> ==================================http://127.0.0.1:8001項目的views def index(request): return render(request,"index.html") def ajax(request): import json print(request.POST,"+++++++++++") return HttpResponse(json.dumps("hello"))
複製代碼

項目2:python

複製代碼 
==================================http://127.0.0.1:8002項目的index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button>sendAjax</button> {% csrf_token %} <script> $("button").click(function(){ $.ajax({ url:"/SendAjax/", type:"POST", data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()}, success:function(data){ alert(data) } }) }) </script> </body> </html> ==================================http://127.0.0.1:8002項目的views def index(request): return render(request,"index.html") from django.views.decorators.csrf import csrf_exempt @csrf_exempt def SendAjax(request): import json print("++++++++") return HttpResponse(json.dumps("hello2"))
複製代碼

 當點擊項目1的按鈕時，發送了請求，可是會發現報錯以下：jquery

 

已攔截跨源請求：同源策略禁止讀取位於 http://127.0.0.1:7766/SendAjax/ 的遠程資源。（緣由：CORS 頭缺乏 'Access-Control-Allow-Origin'）。

注意：跨域發送的請求執行了，並返回了對應的數據，可是瀏覽器會對非同源請求作攔截。ajax

Jsonp

jsonp是json用來跨域的一個東西。原理是經過script標籤的跨域特性來繞過同源策略。django

思考：這算怎麼回事？json

1
<script src = "http://code.jquery.com/jquery-latest.js" >< / script>

 藉助script標籤，實現跨域請求，示例：後端

複製代碼 
# =============================http://127.0.0.1:8001/index <button>ajax</button> {% csrf_token %} <script> function func(name){ alert(name) } </script> <script src="http://127.0.0.1:7766/SendAjax/"></script> # =============================http://127.0.0.1:8002/ from django.views.decorators.csrf import csrf_exempt @csrf_exempt def SendAjax(request): import json print("++++++++") # dic={"k1":"v1"} return HttpResponse("func('yuan')") # return HttpResponse("func('%s')"%json.dumps(dic))
複製代碼

這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：建立一個回調函數，而後在遠程服務上調用這個函數而且將JSON 數據形式做爲參數傳遞，完成回調。

將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。

      通常狀況下，咱們但願這個script標籤可以動態的調用，而不是像上面由於固定在html裏面因此沒等頁面顯示就執行了，很不靈活。咱們能夠經過javascript動態的建立script標籤，這樣咱們就能夠靈活調用遠程服務了。

複製代碼 
<button onclick="f()">sendAjax</button> <script> function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); document.body.removeChild(script); } function func(name){ alert("hello"+name) } function f(){ addScriptTag("http://127.0.0.1:7766/SendAjax/") } </script>
複製代碼

爲了更加靈活，如今將你本身在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調：

將8001的f()改寫爲：

1
2
3
function f(){
          addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
     }

8002的views改成：

1
2
3
4
5
6
7
8
9
10
def SendAjax(request):
 
     import json
 
     dic = { "k1" : "v1" }
 
     print ( "callbacks:" ,request.GET.get( "callbacks" ))
     callbacks = request.GET.get( "callbacks" )
 
     return HttpResponse( "%s('%s')" % (callbacks,json.dumps(dic)))

jQuery對JSONP的實現

getJSON

jQuery框架也固然支持JSONP，可使用$.getJSON(url,[data],[callback])方法

8001的html改成：

複製代碼 
<button onclick="f()">sendAjax</button> <script> function f(){ $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){ alert("hello"+arg) }); } </script>
複製代碼

8002的views不改動。

結果是同樣的，要注意的是在url的後面必須添加一個callback參數，這樣getJSON方法纔會知道是用JSONP方式去訪問服務，callback後面的那個問號是內部自動生成的一個回調函數名。

      此外，若是說咱們想指定本身的回調函數名，或者說服務上規定了固定回調函數名該怎麼辦呢？咱們可使用$.ajax方法來實現

 $.ajax

8001的html改成：

複製代碼 
<script> function f(){ $.ajax({ url:"http://127.0.0.1:7766/SendAjax/", dataType:"jsonp", jsonp: 'callbacks', jsonpCallback:"SayHi" }); } function SayHi(arg){ alert(arg); } </script>
複製代碼

8002的views不改動。

固然，最簡單的形式仍是經過回調函數來處理：

複製代碼 
<script> function f(){ $.ajax({ url:"http://127.0.0.1:7766/SendAjax/", dataType:"jsonp", //必須有，告訴server，此次訪問要的是一個jsonp的結果。  jsonp: 'callbacks', //jQuery幫助隨機生成的：callbacks="wner"  success:function(data){ alert("hi "+data) } }); } </script>
複製代碼

  jsonp: 'callbacks'就是定義一個存放回調函數的鍵，jsonpCallback是前端定義好的回調函數方法名'SayHi'，server端接受callback鍵對應值後就能夠在其中填充數據打包返回了; 

jsonpCallback參數能夠不定義，jquery會自動定義一個隨機名發過去，那前端就得用回調函數來處理對應數據了。利用jQuery能夠很方便的實現JSONP來進行跨域訪問。　　

注意 JSONP必定是GET請求

 應用

<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />


<div id="container"></div>


    <script type="text/javascript">
        function AjaxRequest() {
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'list',
                success: function (data) {
                    
                    $.each(data.data,function(i){
                        var item = data.data[i];
                        var str = "<p>"+ item.week +"</p>";
                        $('#container').append(str);
                        $.each(item.list,function(j){
                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
                            $('#container').append(temp);
                        });
                        $('#container').append("<hr/>");
                    })

                }
            });
        }
</script>
View Code

 

CORS

1、簡介

CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。

所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

2、兩種請求

瀏覽器將CORS請求分紅兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

只要同時知足如下兩大條件，就屬於簡單請求。

複製代碼 
（1) 請求方法是如下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出如下幾種字段： Accept Accept-Language Content-Language Last-Event-ID Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
複製代碼

凡是不一樣時知足上面兩個條件，就屬於非簡單請求。

瀏覽器對這兩種請求的處理，是不同的。

複製代碼 
* 簡單請求和非簡單請求的區別？
 簡單請求：一次請求 非簡單請求：兩次請求，在發送數據以前會先發一次請求用於作「預檢」，只有「預檢」經過後纔再發送一次請求用於數據傳輸。

 * 關於「預檢」 - 請求方式：OPTIONS - 「預檢」其實作檢查，檢查若是經過則容許傳輸數據，檢查不經過則再也不發送真正想要發送的消息 - 如何「預檢」 => 若是複雜請求是PUT等請求，則服務端須要設置容許某請求，不然「預檢」不經過 Access-Control-Request-Method => 若是複雜請求設置了請求頭，則服務端須要設置容許某請求頭，不然「預檢」不經過 Access-Control-Request-Headers
複製代碼

 

支持跨域，簡單請求

服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'

備註：「*」表示容許全部跨域請求

支持跨域，複雜請求

因爲複雜請求時，首先會發送「預檢」請求，若是「預檢」成功，則發送真實數據。

  • 「預檢」請求時，容許請求方式則需服務器設置響應頭：Access-Control-Allow-Methods
  • 「預檢」請求時，容許請求頭則需服務器設置響應頭：Access-Control-Allow-Headers
　
備註：設置請求方式時，值必須是大寫的請求方法。
　　不管是設置請求頭仍是請求方式，對個數值之間用","分割 
response['Access-Control-Allow-Methods'] = 'DELETE,PUT'
response['Access-Control-Allow-Headers'] = '請求頭中容許的key1，key2,Content-Type'  # 容許其餘形式的數據，好比json

 預檢請求方式時，會報錯：以put請求爲例：

 預檢請求頭時，會報錯：

 
 

 

 容許跨域時，最好是寫一箇中間件，將全部的響應中加上容許的頭。 
from django.utils.deprecation import MiddlewareMixin


class CrossMiddleware(MiddlewareMixin):

    def process_response(self,request,response):
        ret = response
        ret['Access-Control-Allow-Methods'] = 'DELETE,PUT'
        ret['Access-Control-Allow-Origin'] = '*'
　　　　 if request.method == 'OPTIONS':
　　　　　　response['Access-Control-Allow-Headers'] = 'Content-Type'

        return ret
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程