一 . 為什么會有跨域問題
是因為瀏覽器的同源策略是對ajax請求進行阻攔了,但是不是所有的請求都給做跨域,像是一般的href 屬性,a標簽什么的都不攔截.
二 . 解決跨域的方法
解決跨域有兩種方法 :
JSONP
CORS
三 . 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請求. 只能發get請求
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-Request-Headers
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)