在django中解決跨域AJAX


由於瀏覽器存在同源策略機制,同源策略阻止從一個源加載的文檔或腳本獲取另一個源加載的文檔的屬性。

特別的:由於同源策略是瀏覽器的限制,所以請求的發送和響應是可以進行,只不過瀏覽器不接收罷了。

瀏覽器同源策略並不是對所有的請求均制約:

  • 制約:XmlHttpRequest
  • 不制約:img、iframe、script等具有src屬性的標簽

跨域,跨域名訪問,如:http://www.c1.com域名向http://www.cw.com域名發送請求。

1. JSONP實現跨域請求

JSONP(JSONP-JSON with Padding是JSON的一種“使用模式”),是利用script標簽的src屬性(瀏覽器允許script標簽跨域)。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <p>
10         <input type="button" onclick="Jsonp1();"  value='提交'/>
11     </p>
12 
13     <p>
14         <input type="button" onclick="Jsonp2();" value='提交'/>
15     </p>
16 
17     <script type="text/javascript" src="jquery-1.12.4.js"></script>
18     <script>
19         function Jsonp1(){
20             var tag = document.createElement('script');
21             tag.src = "http://c2.com:8000/test/";
22             document.head.appendChild(tag);
23             document.head.removeChild(tag);
24 
25         }
26 
27         function Jsonp2(){
28             $.ajax({
29                 url: "http://c2.com:8000/test/",
30                 type: 'GET',
31                 dataType: 'JSONP',
32                 success: function(data, statusText, xmlHttpRequest){
33                     console.log(data);
34                 }
35             })
36         }
37 
38 
39     </script>
40 </body>
41 </html>
42 
43 基於JSONP實現跨域Ajax - Demo
基於JSONP實現跨域Ajax -Demo

2. CORS

隨着技術的發展,現在的瀏覽器可以支持主動設置從而允許跨域請求,即:跨域資源共享(CORS,Cross-Origin Resource Sharing),其本質是設置響應頭,使得瀏覽器允許跨域請求。

* 簡單請求 OR 非簡單請求

條件:
    1、請求方式:HEAD、GET、POST
    2、請求頭信息:
            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

3. 在django中支持跨域,復雜請求

由於復雜請求時,首先會發送“預檢”請求,如果“預檢”成功則發送真實數據。

  • “預檢”請求時,允許請求方式則需服務器設置響應頭:Access-Control-Request-Method
  • “預檢”請求時,允許請求頭則需要服務器設置響應頭:Access-Control-Request_Headers
  • “預檢”緩存時間,服務器設置響應頭:Access-Control-Max-Age

在django中設置中間件,可以解決跨域問題,具體做法如下:

第一步:在需要解決跨域的app中新建一個文件夾【middleware】,然后再新建一個python文件【cros.py】。

第二步:在py文件【cros.py】中,寫入代碼如下:

1 from django.utils.deprecation import MiddlewareMixin
2 
3 class CORS(MiddlewareMixin):
4     def process_response(self, request, response):
5         response['Access-Control-Allow-Origin'] = "*"
6         response['Access-Control-Allow-Headers'] = "Content-Type"
7         response['Access-Control-Allow-Method'] = "PUT,DELETE"
8         return response
Django中間件解決跨域問題

第三步:將【cros.py】注冊在【settings】中的【MIDDLEWARE】中

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM