Django學習【第26篇】：後端CORS解決跨域問題 解決跨域問題
阿新 • • 發佈：2018-12-21
解決跨域問題
一、為什麼會有跨域問題？
是因為瀏覽器的同源策略是對ajax請求進行阻攔了，但是不是所有的請求都給做跨域，像是一般的href屬性，a標籤什麼的都不攔截。
二、解決跨域問題的兩種方式
- JSONP
- CORS
三、JSONP
先簡單來說一下JSONP，具體詳細詳見上面JSONP
JSONP是json用來跨域的一個東西。原理是通過script標籤的跨域特性來繞過同源策略。（建立一個回撥函式，然後在遠端服務上呼叫這個函式並且將json資料形式作為引數傳遞，完成回撥）。
四、CORS跨域
隨著技術的發展，現在的瀏覽器可以主動支援設定從而允許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設定響應頭，使得瀏覽器允許跨域請求。
1、簡單請求和複雜請求
條件：
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 注意：同時滿足以上兩個條件時，則是簡單請求，否則為複雜請求
2、簡單請求和複雜請求的區別？
簡單請求：一次請求
非簡單請求：兩次請求，在傳送資料之前會先發第一次請求做‘預檢’，只有‘預檢’通過後才再傳送一次請求用於資料傳輸。
3、關於預檢
- 請求方式：OPTIONS
- “預檢”其實做檢查，檢查如果通過則允許傳輸資料，檢查不通過則不再發送真正想要傳送的訊息
- 如何“預檢”
=> 如果複雜請求是PUT等請求，則服務端需要設定允許某請求，否則“預檢”不通過
Access-Control-Request-Method
=> 如果複雜請求設定了請求頭，則服務端需要設定允許某請求頭，否則“預檢”不通過 Access-Control-Request-Headers
4、CORS的優缺點
- CORS的優點：可以發任意請求
- CORS的缺點：上是複雜請求的時候得先做個預檢，再發真實的請求。發了兩次請求會有效能上的損耗
五、JSONP和CORS的區別
JSONP：服務端不用修改，需要改前端。發jsonp請求
JSONP：只能發GET請求
CORS：前端的程式碼不用修改，服務端的程式碼需要修改。如果是簡單請求的話在服務端加上一個響應頭。
CORS：可以發任意請求
六、基於CORS實現ajax請求
1、支援跨域，簡單請求
客戶端
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
2、支援跨域，複雜請求
如果是複雜請求在你真正的發請求之前，會先偷偷的發一個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
3、跨域獲取響應頭
預設獲取到的所有響應頭只有基本資訊，如果想要獲取自定義的響應頭，則需要再伺服器端設定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
4、跨域傳輸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)
一、為什麼會有跨域問題？
是因為瀏覽器的同源策略是對ajax請求進行阻攔了，但是不是所有的請求都給做跨域，像是一般的href屬性，a標籤什麼的都不攔截。
二、解決跨域問題的兩種方式
- JSONP
- CORS
三、JSONP
先簡單來說一下JSONP，具體詳細詳見上面JSONP
JSONP是json用來跨域的一個東西。原理是通過script標籤的跨域特性來繞過同源策略。（建立一個回撥函式，然後在遠端服務上呼叫這個函式並且將json資料形式作為引數傳遞，完成回撥）。
四、CORS跨域
隨著技術的發展，現在的瀏覽器可以主動支援設定從而允許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設定響應頭，使得瀏覽器允許跨域請求。
1、簡單請求和複雜請求
條件：
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 注意：同時滿足以上兩個條件時，則是簡單請求，否則為複雜請求
2、簡單請求和複雜請求的區別？
簡單請求：一次請求
非簡單請求：兩次請求，在傳送資料之前會先發第一次請求做‘預檢’，只有‘預檢’通過後才再傳送一次請求用於資料傳輸。
3、關於預檢
- 請求方式：OPTIONS
- “預檢”其實做檢查，檢查如果通過則允許傳輸資料，檢查不通過則不再發送真正想要傳送的訊息
- 如何“預檢”
=> 如果複雜請求是PUT等請求，則服務端需要設定允許某請求，否則“預檢”不通過
Access-Control-Request-Method
=> 如果複雜請求設定了請求頭，則服務端需要設定允許某請求頭，否則“預檢”不通過 Access-Control-Request-Headers
4、CORS的優缺點
- CORS的優點：可以發任意請求
- CORS的缺點：上是複雜請求的時候得先做個預檢，再發真實的請求。發了兩次請求會有效能上的損耗
五、JSONP和CORS的區別
JSONP：服務端不用修改，需要改前端。發jsonp請求
JSONP：只能發GET請求
CORS：前端的程式碼不用修改，服務端的程式碼需要修改。如果是簡單請求的話在服務端加上一個響應頭。
CORS：可以發任意請求
六、基於CORS實現ajax請求
1、支援跨域，簡單請求
客戶端
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
2、支援跨域，複雜請求
如果是複雜請求在你真正的發請求之前，會先偷偷的發一個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
3、跨域獲取響應頭
預設獲取到的所有響應頭只有基本資訊，如果想要獲取自定義的響應頭，則需要再伺服器端設定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
4、跨域傳輸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)