Django學習【第26篇】：後端CORS解決跨域問題

1、爲何會有跨域問題？javascript

是由於瀏覽器的同源策略是對ajax請求進行阻攔了，可是不是全部的請求都給作跨域，像是通常的href屬性，a標籤什麼的都不攔截。html

2、解決跨域問題的兩種方式前端

JSONP
CORS

3、JSONPjava

先簡單來講一下JSONP，具體詳細詳見上面JSONPjquery

JSONP是json用來跨域的一個東西。原理是經過script標籤的跨域特性來繞過同源策略。（建立一個回調函數，而後在遠程服務上調用這個函數而且將json數據形式做爲參數傳遞，完成回調）。web

4、CORS跨域ajax

隨着技術的發展，如今的瀏覽器能夠主動支持設置從而容許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設置響應頭，使得瀏覽器容許跨域請求。django

一、簡單請求和複雜請求json

條件：
    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

四、CORS的優缺點

CORS的優勢：能夠發任意請求
CORS的缺點：上是複雜請求的時候得先作個預檢，再發真實的請求。發了兩次請求會有性能上的損耗

5、JSONP和CORS的區別

JSONP：服務端不用修改，須要改前端。發jsonp請求

JSONP：只能發GET請求

CORS：前端的代碼不用修改，服務端的代碼須要修改。若是是簡單請求的話在服務端加上一個響應頭。

CORS：能夠發任意請求

6、基於CORS實現ajax請求

一、支持跨域，簡單請求

客戶端

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>Title</title>
 8 </head>
 9 <body>
10 <div>
11     <h1>歡迎來到個人主頁</h1>
12     <button onclick="getData()">獲取用戶數據</button>
13 </div>
14 <script src="/static/jquery-1.12.4.min.js"></script>
15 <script>
16     function getData() {
17  $.ajax({ 18 url:'http://127.0.0.1:8080/index/', 19 type:"GET", 20  success:function (data) { 21  console.log(data) 22  } 23 24  }) 25  } 26 </script> 27 </body> 28 </html>

服務端

 1 from django.shortcuts import render
 2 from django.http import JsonResponse 3 from rest_framework.views import APIView 4 5 # Create your views here. 6 class IndexView(APIView): 7 def get(self,request,*args,**kwargs): 8 ret = { 9 'code': 111, 10 'data': '你好嗎？' 11  } 12 response = JsonResponse(ret) 13 response['Access-Control-Allow-Origin'] = "*" 14 return response

二、支持跨域，複雜請求

若是是複雜請求在你真正的發請求以前，會先偷偷的發一個OPTION請求，先預檢一下，我

容許你來你纔來

若是想預檢經過就得寫個option請求

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>Title</title>
 8 </head>
 9 <body>
10 <input type="button" value="獲取用戶數據" onclick="getUser()">
11 <script src="/static/jquery-1.12.4.min.js"></script>
12 <script>
13     function getUser() {
14  $.ajax({ 15 url:'http://127.0.0.1:8080/user/', 16 type:'POST', 17 data:{'k1':'v1'}, 18  headers:{ 19 'h1':'sdfdgfdg' 20  }, 21  success:function (ret) { 22  console.log(ret) 23  } 24  }) 25  } 26 </script> 27 </body> 28 </html>

 1 from django.shortcuts import render,HttpResponse
 2 from django.http import JsonResponse 3 from rest_framework.views import APIView 4 5 class UserIndex(APIView): 6 def get(self,request,*args,**kwargs): 7 ret = { 8 'code': 111, 9 'data': '你好嗎？' 10  } 11 response = JsonResponse(ret) 12 response['Access-Control-Allow-Origin'] = "*" 13 return response 14 15 def post(self,request,*args,**kwargs): 16 print(request.POST.get('k1')) 17 ret = { 18 'code':1000, 19 'data':'過年啦', 20  } 21 response = JsonResponse(ret) 22 response['Access-Control-Allow-Origin'] = "*" 23 return response 24 25 def options(self, request, *args, **kwargs): 26 # self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") 27 # self.set_header('Access-Control-Allow-Headers', "k1,k2") 28 # self.set_header('Access-Control-Allow-Methods', "PUT,DELETE") 29 # self.set_header('Access-Control-Max-Age', 10) 30 31 response = HttpResponse() 32 response['Access-Control-Allow-Origin'] = '*' 33 response['Access-Control-Allow-Headers'] = 'h1' 34 # response['Access-Control-Allow-Methods'] = 'PUT' 35 return response

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

「預檢」請求時，容許請求方式則需服務器設置響應頭：Access-Control-Request-Method
「預檢」請求時，容許請求頭則需服務器設置響應頭：Access-Control-Request-Headers
「預檢」緩存時間，服務器設置響應頭：Access-Control-Max-Age

三、跨域獲取響應頭

默認獲取到的全部響應頭只有基本信息，若是想要獲取自定義的響應頭，則須要再服務器端設置Access-Control-Expose-Headers。

 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="submit" onclick="XmlSendRequest();" />
11     </p>
12 
13     <p>
14         <input type="submit" onclick="JqSendRequest();" />
15     </p>
16 
17     <script type="text/javascript" src="jquery-1.12.4.js"></script>
18     <script>
19         function XmlSendRequest(){
20             var xhr = new XMLHttpRequest(); 21 xhr.onreadystatechange = function(){ 22 if(xhr.readyState == 4) { 23 var result = xhr.responseText; 24  console.log(result); 25 // 獲取響應頭 26  console.log(xhr.getAllResponseHeaders()); 27  } 28  }; 29 xhr.open('PUT', "http://c2.com:8000/test/", true); 30 xhr.setRequestHeader('k1', 'v1'); 31  xhr.send(); 32  } 33 34  function JqSendRequest(){ 35  $.ajax({ 36 url: "http://c2.com:8000/test/", 37 type: 'PUT', 38 dataType: 'text', 39 headers: {'k1': 'v1'}, 40  success: function(data, statusText, xmlHttpRequest){ 41  console.log(data); 42 // 獲取響應頭 43  console.log(xmlHttpRequest.getAllResponseHeaders()); 44  } 45  }) 46  } 47 48 49 </script> 50 </body> 51 </html> 52 53 HTML

 1 class MainHandler(tornado.web.RequestHandler):
 2     
 3     def put(self): 4 self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") 5 6 self.set_header('xxoo', "seven") 7 self.set_header('bili', "daobidao") 8 9 self.set_header('Access-Control-Expose-Headers', "xxoo,bili") 10 11 12 self.write('{"status": true, "data": "seven"}') 13 14 def options(self, *args, **kwargs): 15 self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") 16 self.set_header('Access-Control-Allow-Headers', "k1,k2") 17 self.set_header('Access-Control-Allow-Methods', "PUT,DELETE") 18 self.set_header('Access-Control-Max-Age', 10) 19 20 Tornado

四、跨域傳輸cookie

在跨域請求中，默認狀況下，HTTP Authentication信息，Cookie頭以及用戶的SSL證書不管在預檢請求中或是在實際請求都是不會被髮送。

若是想要發送：

瀏覽器端：XMLHttpRequest的withCredentials爲true
服務器端：Access-Control-Allow-Credentials爲true
注意：服務器端響應的 Access-Control-Allow-Origin 不能是通配符 *

 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="submit" onclick="XmlSendRequest();" />
11     </p>
12 
13     <p>
14         <input type="submit" onclick="JqSendRequest();" />
15     </p>
16 
17     <script type="text/javascript" src="jquery-1.12.4.js"></script>
18     <script>
19         function XmlSendRequest(){
20             var xhr = new XMLHttpRequest(); 21 xhr.onreadystatechange = function(){ 22 if(xhr.readyState == 4) { 23 var result = xhr.responseText; 24  console.log(result); 25  } 26  }; 27 28 xhr.withCredentials = true; 29 30 xhr.open('PUT', "http://c2.com:8000/test/", true); 31 xhr.setRequestHeader('k1', 'v1'); 32  xhr.send(); 33  } 34 35  function JqSendRequest(){ 36  $.ajax({ 37 url: "http://c2.com:8000/test/", 38 type: 'PUT', 39 dataType: 'text', 40 headers: {'k1': 'v1'}, 41  xhrFields:{withCredentials: true}, 42  success: function(data, statusText, xmlHttpRequest){ 43  console.log(data); 44  } 45  }) 46  } 47 48 49 </script> 50 </body> 51 </html> 52 53 HTML

 1 class MainHandler(tornado.web.RequestHandler):
 2     
 3     def put(self): 4 self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") 5 self.set_header('Access-Control-Allow-Credentials', "true") 6 7 self.set_header('xxoo', "seven") 8 self.set_header('bili', "daobidao") 9 self.set_header('Access-Control-Expose-Headers', "xxoo,bili") 10 11 self.set_cookie('kkkkk', 'vvvvv'); 12 13 self.write('{"status": true, "data": "seven"}') 14 15 def options(self, *args, **kwargs): 16 self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") 17 self.set_header('Access-Control-Allow-Headers', "k1,k2") 18 self.set_header('Access-Control-Allow-Methods', "PUT,DELETE") 19 self.set_header('Access-Control-Max-Age', 10)