一 同源和跨域
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。
同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，即檢查是否同源，只有和百度同源的腳本才會被執行。如果非同源，那么在請求數據時，瀏覽器會在控制台中報一個異常，提示拒絕訪問。
簡單請求跨域
我們創建兩個django項目，第一個叫做s1，一個叫做s2，s1用8000端口啟動，s2用8001端口啟動
s1項目的index.html文件內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>s1的首頁</h2>
<button id="btn">Ajax請求</button>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script>
$('#btn').click(function () {
$.ajax({
//url:'/books/', 訪問自己服務器的路由，同源(ip地址、協議、端口都相同才是同源)
url:'http://127.0.0.1:8001/books/', //訪問其他服務器的路由，不同源,那么你可以訪問到另外一個服務器，但是瀏覽器將響應內容給攔截了，並給你不同源的錯誤：Access to XMLHttpRequest at 'http://127.0.0.1:8001/books/' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1:8002' that is not equal to the supplied origin.
#並且注意ip地址和端口后面是一個斜杠，如果s2的這個url沒有^books的^符號，那么可以寫兩個//。
type:'get',
success:function (response) {
console.log(response);
}
})
})
</script>
</body>
</html>
urls.py文件內容如下：
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^books/', views.books),
]
views.py內容如下：
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
# Create your views here.
def index(request):
return render(request,'index.html')
def books(request):
# return JsonResponse(['西游記','三國演義','水滸傳'],safe=False)
obj = JsonResponse(['西游記','三國演義','水滸傳'],safe=False)
return obj
s2項目的urls.py內容如下：
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^books/', views.books),
]
views.py內容如下：
from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):
# return JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
obj = JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
#下面這個響應頭信息是告訴瀏覽器，不要攔着，我就給它，"*"的意思是誰來請求我，我都給
# obj["Access-Control-Allow-Origin"] = "*"
obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000" #只有這個ip和端口來的請求，我才給他數據，其他你瀏覽器幫我攔着
return obj
以上是一個簡單請求的跨域問題和解決方法。
二 CORS通信實現跨域
CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低於IE10。
整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。
瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。
只要同時滿足以下兩大條件，就屬於簡單請求。
（1) 請求方法是以下三種方法之一：（也就是說如果你的請求方法是什么put、delete等肯定是非簡單請求） HEAD GET POST （2）HTTP的頭信息不超出以下幾種字段：（如果比這些請求頭多，那么一定是非簡單請求） Accept Accept-Language Content-Language Last-Event-ID Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain，也就是說，如果你發送的application/json格式的數據，那么肯定是非簡單請求，vue的axios默認的請求體信息格式是json的，ajax默認是urlencoded的。
凡是不同時滿足上面兩個條件，就屬於非簡單請求。
我們改一下上一節的s1項目的index.html文件中的ajax里面的內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>s1的首頁</h2>
<button id="btn">Ajax請求</button>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script>
$('#btn').click(function () {
$.ajax({
url:'http://127.0.0.1:8001/books/',
type:'post',
contentType:'application/json',//非簡單請求，會報錯：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
data:JSON.stringify({
a:'1'
}),
//headers:{b:2},
success:function (response) {
console.log(response);
}
})
})
</script>
</body>
</html>
瀏覽器對這兩種請求的處理，是不一樣的。
* 簡單請求和非簡單請求的區別？
簡單請求：一次請求
非簡單請求：兩次請求，在發送數據之前會先發一次請求用於做“預檢”，只有“預檢”通過后才再發送一次請求用於數據傳輸。
* 關於“預檢”
- 請求方式：OPTIONS
- “預檢”其實做檢查，檢查如果通過則允許傳輸數據，檢查不通過則不再發送真正想要發送的消息
- 如何“預檢”
=> 如果復雜請求是PUT等請求，則服務端需要設置允許某請求，否則“預檢”不通過
Access-Control-Request-Method
=> 如果復雜請求設置了請求頭，則服務端需要設置允許某請求頭，否則“預檢”不通過
Access-Control-Request-Headers
看圖：
s2項目的views.py內容如下：
from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):
# return JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
obj = JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
# obj["Access-Control-Allow-Origin"] = "*"
obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
print(request.method)
#處理預檢的options請求，這個預檢的響應，我們需要在響應頭里面加上下面的內容
if request.method == 'OPTIONS':
# obj['Access-Control-Allow-Headers'] = "Content-Type" #"Content-Type",首字母小寫也行
# obj['Access-Control-Allow-Headers'] = "content-type" #"Content-Type",首字母小寫也行。這個content-type的意思是，什么樣的請求體類型數據都可以，我們前面說了content-type等於application/json時，是復雜請求，復雜請求先進行預檢，預檢的響應中我們加上這個，就是告訴瀏覽器，不要攔截
obj['Access-Control-Allow-Headers'] = "content-type,b" #發送來的請求里面的請求頭里面的內容可以定義多個，后端需要將頭配置上才能訪問
return obj
支持跨域，簡單請求
服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'
支持跨域，復雜請求
由於復雜請求時，首先會發送“預檢”請求，如果“預檢”成功，則發送真實數據。
“預檢”請求時，允許請求方式則需服務器設置響應頭：Access-Control-Request-Method
“預檢”請求時，允許請求頭則需服務器設置響應頭：Access-Control-Request-Headers
關於請求方式的跨域問題及解決方法：
s1的index.html文件內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>s1的首頁</h2>
<button id="btn">Ajax請求</button>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script>
$('#btn').click(function () {
$.ajax({
url:'http://127.0.0.1:8001/books/',
//type:'delete',
//type:'post',
type:'put',
contentType:'application/json',//非簡單請求，會報錯：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
data:JSON.stringify({
a:'1'
}),
headers:{b:'2'},
success:function (response) {
console.log(response);
}
})
})
</script>
</body>
</html>
s2項目的views.py內容如下：
from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):
# return JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
obj = JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
# obj["Access-Control-Allow-Origin"] = "*"
obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
print(request.method)
#處理預檢的options請求，這個預檢的響應，我們需要在響應頭里面加上下面的內容
if request.method == 'OPTIONS':
obj['Access-Control-Allow-Headers'] = "content-type,b" #發送來的請求里面的請求頭里面的內容可以定義多個，后端需要將頭配置上才能訪問
obj['Access-Control-Allow-Methods'] = "DELETE,PUT" #通過預檢的請求方法設置
return obj
三 Jsonp實現跨域
Jsonp
jsonp是json用來跨域的一個東西。原理是通過script標簽的跨域特性來繞過同源策略。
思考：這算怎么回事？
<script src="http://code.jquery.com/jquery-latest.js"></script>
script標簽的src屬性是可以直接實現跨域的，這是標簽特性，所以我們可以借助它來實現跨域。
# =============================http://127.0.0.1:8001/index.html
<button>ajax</button>
{% csrf_token %}
<script>
function func(name){ //func寫在下面src請求的上面，不然找不到這個func函數，我們請求的另一個網站的后端返回的數據就是這個函數名稱加參數的形式 // #HttpResponse("func('chao')")
alert(name)
}
</script>
<script src="http://127.0.0.1:8002/SendAjax/"></script>
# =============================http://127.0.0.1:8002/
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt #如果跨域請求是post請求，別忘了csrftoken可能會產生的阻攔，get請求不需要加上它
def SendAjax(request):
import json
print("++++++++")
# dic={"k1":"v1"}
return HttpResponse("func('chao')") # return HttpResponse("func('%s')"%json.dumps(dic))
# 注意，func這個名稱是另外那個發送請求的網站的一個js代碼函數名稱
這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：創建一個回調函數，然后在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調。
將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。
一般情況下，我們希望這個script標簽能夠動態的調用，而不是像上面因為固定在html里面所以沒等頁面顯示就執行了，很不靈活。我們可以通過javascript動態的創建script標簽，這樣我們就可以靈活調用遠程服務了。
<button onclick="f()">sendAjax</button>
<script>
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
document.body.removeChild(script);
}
function func(name){ #接受返回數據的回調函數
alert("hello"+name)
}
function f(){
addScriptTag("http://127.0.0.1:8002/SendAjax/")
}
</script>
為了更加靈活，現在將你自己在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調，這樣的話，后端服務器就不需要知道你的回調函數的名稱是什么了，不然和上面似的，服務端必須知道你的函數名稱，就不太靈活：
將8001的f()改寫為：
function f(){
addScriptTag("http://127.0.0.1:8002/SendAjax/?callbacks=func") // callbacks這個名稱不是固定的，和另一個網站的服務端商量好就行了，就是后端取值時的一個參數而已
}
8002的views改為：
def SendAjax(request):
import json
dic={"k1":"v1"}
print("callbacks:",request.GET.get("callbacks"))
callbacks=request.GET.get("callbacks")
return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))
jQuery對JSONP的實現
getJSON
jQuery框架也當然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法
8001的html改為：
<button onclick="f()">sendAjax</button>
<script>
function f(){
$.getJSON("http://127.0.0.1:8002/SendAjax/?callbacks=?",function(arg){
alert("hello"+arg)
});
}
</script>
8002的views不改動。
結果是一樣的，要注意的是在url的后面必須添加一個callbacks(callbacks名不是固定的)參數，這樣getJSON方法才會知道是用JSONP方式去訪問服務，callbacks后面的那個問號是內部自動生成的一個回調函數名。
此外，如果說我們想指定自己的回調函數名，或者說服務上規定了固定回調函數名該怎么辦呢？我們可以使用$.ajax方法來實現
$.ajax
8001的html改為：
<script>
function f(){
$.ajax({ //大家會發現我的type請求方法沒寫，默認是get請求
url:"http://127.0.0.1:8002/SendAjax/",
dataType:"jsonp",
jsonp: 'callbacks',
jsonpCallback:"SayHi"
});
}
function SayHi(arg){
alert(arg.k1); //k1是后端返回的數據中的鍵值對的鍵
}
</script>
8002的views不改動。
當然，最簡單的形式還是通過回調函數來處理：
<script>
function f(){
$.ajax({
url:"http://127.0.0.1:8002/SendAjax/",
dataType:"jsonp", //必須有，告訴server，這次訪問要的是一個jsonp的結果。
jsonp: 'callbacks', //jQuery幫助隨機生成的：callbacks="wner"
success:function(data){
alert("hi "+data)
}
});
}
</script>
jsonp: 'callbacks'就是定義一個存放回調函數的鍵，jsonpCallback是前端定義好的回調函數方法名'SayHi'，server端接受callback鍵對應值后就可以在其中填充數據打包返回了;
jsonpCallback參數可以不定義，jquery會自動定義一個隨機名發過去，那前端就得用回調函數來處理對應數據了。利用jQuery可以很方便的實現JSONP來進行跨域訪問。
注意 JSONP一定是GET請求
應用：
<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />
<div id="container"></div>
<script type="text/javascript">
function AjaxRequest() {
$.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'list',
success: function (data) {
$.each(data.data,function(i){
var item = data.data[i];
var str = "<p>"+ item.week +"</p>";
$('#container').append(str);
$.each(item.list,function(j){
var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
$('#container').append(temp);
});
$('#container').append("<hr/>");
})
}
});
}
</script>