Django 【第二十篇】後端CORS解決跨域問題
阿新 • • 發佈：2018-02-21
lds class device img ssl 響應 value ajax請求 客戶
一、為什麽會有跨域問題？
是因為瀏覽器的同源策略是對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-Headers4、CORS的優缺點
- CORS的優點：可以發任意請求
- CORS的缺點：上是復雜請求的時候得先做個預檢，再發真實的請求。發了兩次請求會有性能上的損耗
五、JSONP和CORS的區別
JSONP：服務端不用修改，需要改前端。發jsonp請求
JSONP：只能發GET請求
CORS：前端的代碼不用修改，服務端的代碼需要修改。如果是簡單請求的話在服務端加上一個響應頭。
CORS：可以發任意請求
六、基於CORS實現ajax請求
1、支持跨域，簡單請求
客戶端
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
</head>
<body>
<div>
<h1>歡迎來到我的主頁</h1>
<button onclick="getData()">獲取用戶數據</button>
</div>
<script src="/static/jquery-1.12.4.min.js"></script>
<script>
function getData() {
$.ajax({
url:‘http://127.0.0.1:8080/index/‘,
type:"GET",
success:function (data) {
console.log(data)
}
})
}
</script>
</body>
</html>
服務端
views.pyfrom django.shortcuts import render
from django.http import JsonResponse
from rest_framework.views import APIView
# Create your views here.
class IndexView(APIView):
def get(self,request,*args,**kwargs):
ret = {
‘code‘: 111,
‘data‘: ‘你好嗎？‘
}
response = JsonResponse(ret)
response[‘Access-Control-Allow-Origin‘] = "*"
return response
2、支持跨域，復雜請求
如果是復雜請求在你真正的發請求之前，會先偷偷的發一個OPTION請求，先預檢一下，我
允許你來你才來
如果想預檢通過就得寫個option請求
user.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
</head>
<body>
<input type="button" value="獲取用戶數據" onclick="getUser()">
<script src="/static/jquery-1.12.4.min.js"></script>
<script>
function getUser() {
$.ajax({
url:‘http://127.0.0.1:8080/user/‘,
type:‘POST‘,
data:{‘k1‘:‘v1‘},
headers:{
‘h1‘:‘sdfdgfdg‘
},
success:function (ret) {
console.log(ret)
}
})
}
</script>
</body>
</html>
user.html
服務端
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from rest_framework.views import APIView
class UserIndex(APIView):
def get(self,request,*args,**kwargs):
ret = {
‘code‘: 111,
‘data‘: ‘你好嗎？‘
}
response = JsonResponse(ret)
response[‘Access-Control-Allow-Origin‘] = "*"
return response
def post(self,request,*args,**kwargs):
print(request.POST.get(‘k1‘))
ret = {
‘code‘:1000,
‘data‘:‘過年啦‘,
}
response = JsonResponse(ret)
response[‘Access-Control-Allow-Origin‘] = "*"
return response
def options(self, request, *args, **kwargs):
# self.set_header(‘Access-Control-Allow-Origin‘, "http://www.xxx.com")
# self.set_header(‘Access-Control-Allow-Headers‘, "k1,k2")
# self.set_header(‘Access-Control-Allow-Methods‘, "PUT,DELETE")
# self.set_header(‘Access-Control-Max-Age‘, 10)
response = HttpResponse()
response[‘Access-Control-Allow-Origin‘] = ‘*‘
response[‘Access-Control-Allow-Headers‘] = ‘h1‘
# response[‘Access-Control-Allow-Methods‘] = ‘PUT‘
return response
由於復雜請求時，首先會發送“預檢”請求，如果“預檢”成功，則發送真實數據。
- “預檢”請求時，允許請求方式則需服務器設置響應頭：Access-Control-Request-Method
- “預檢”請求時，允許請求頭則需服務器設置響應頭：Access-Control-Request-Headers
- “預檢”緩存時間，服務器設置響應頭：Access-Control-Max-Age
3、跨域獲取響應頭
默認獲取到的所有響應頭只有基本信息，如果想要獲取自定義的響應頭，則需要再服務器端設置Access-Control-Expose-Headers。
a.html<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="submit" onclick="XmlSendRequest();" />
</p>
<p>
<input type="submit" onclick="JqSendRequest();" />
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function XmlSendRequest(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
var result = xhr.responseText;
console.log(result);
// 獲取響應頭
console.log(xhr.getAllResponseHeaders());
}
};
xhr.open(‘PUT‘, "http://c2.com:8000/test/", true);
xhr.setRequestHeader(‘k1‘, ‘v1‘);
xhr.send();
}
function JqSendRequest(){
$.ajax({
url: "http://c2.com:8000/test/",
type: ‘PUT‘,
dataType: ‘text‘,
headers: {‘k1‘: ‘v1‘},
success: function(data, statusText, xmlHttpRequest){
console.log(data);
// 獲取響應頭
console.log(xmlHttpRequest.getAllResponseHeaders());
}
})
}
</script>
</body>
</html>
HTML
views.py
class MainHandler(tornado.web.RequestHandler):
def put(self):
self.set_header(‘Access-Control-Allow-Origin‘, "http://www.xxx.com")
self.set_header(‘xxoo‘, "seven")
self.set_header(‘bili‘, "daobidao")
self.set_header(‘Access-Control-Expose-Headers‘, "xxoo,bili")
self.write(‘{"status": true, "data": "seven"}‘)
def options(self, *args, **kwargs):
self.set_header(‘Access-Control-Allow-Origin‘, "http://www.xxx.com")
self.set_header(‘Access-Control-Allow-Headers‘, "k1,k2")
self.set_header(‘Access-Control-Allow-Methods‘, "PUT,DELETE")
self.set_header(‘Access-Control-Max-Age‘, 10)
4、跨域傳輸cookie
在跨域請求中，默認情況下，HTTP Authentication信息，Cookie頭以及用戶的SSL證書無論在預檢請求中或是在實際請求都是不會被發送。
如果想要發送：
- 瀏覽器端：XMLHttpRequest的withCredentials為true
- 服務器端：Access-Control-Allow-Credentials為true
- 註意：服務器端響應的 Access-Control-Allow-Origin 不能是通配符 *
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="submit" onclick="XmlSendRequest();" />
</p>
<p>
<input type="submit" onclick="JqSendRequest();" />
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function XmlSendRequest(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
var result = xhr.responseText;
console.log(result);
}
};
xhr.withCredentials = true;
xhr.open(‘PUT‘, "http://c2.com:8000/test/", true);
xhr.setRequestHeader(‘k1‘, ‘v1‘);
xhr.send();
}
function JqSendRequest(){
$.ajax({
url: "http://c2.com:8000/test/",
type: ‘PUT‘,
dataType: ‘text‘,
headers: {‘k1‘: ‘v1‘},
xhrFields:{withCredentials: true},
success: function(data, statusText, xmlHttpRequest){
console.log(data);
}
})
}
</script>
</body>
</html>
HTML
views.py
class MainHandler(tornado.web.RequestHandler):
def put(self):
self.set_header(‘Access-Control-Allow-Origin‘, "http://www.xxx.com")
self.set_header(‘Access-Control-Allow-Credentials‘, "true")
self.set_header(‘xxoo‘, "seven")
self.set_header(‘bili‘, "daobidao")
self.set_header(‘Access-Control-Expose-Headers‘, "xxoo,bili")
self.set_cookie(‘kkkkk‘, ‘vvvvv‘);
self.write(‘{"status": true, "data": "seven"}‘)
def options(self, *args, **kwargs):
self.set_header(‘Access-Control-Allow-Origin‘, "http://www.xxx.com")
self.set_header(‘Access-Control-Allow-Headers‘, "k1,k2")
self.set_header(‘Access-Control-Allow-Methods‘, "PUT,DELETE")
self.set_header(‘Access-Control-Max-Age‘, 10)
Django 【第二十篇】後端CORS解決跨域問題