同源策略
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。
可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。
同源
域名、協議、端口相同，也就是在同一個域里。
非同源受到的限制
- cookie不能讀取 （如我在自己的站點無法讀取博客園用戶的cookie）
- dom無法獲得
- ajax請求不能發送
什么是瀏覽器跨域
例如：
一個域的頁面去請求另一個域的資源；
A域的頁面去請求B域的資源。
Jsonp實現跨域
JSONP的基本原理
動態添加一個<script>標簽，而script標簽的src屬性是沒有跨域的限制的。
這樣一來,這種跨域方式就與ajax XmlHttpRequest協議無關了。
JSONP即JSON with Padding
由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源。
如果要進行跨域請求， 我們可以通過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中可以直接使用JSON傳遞javascript對象,這種跨域的通訊方式稱為JSONP。
JSON 是一種數據格式
JSONP 是一種數據調用的方式
Jsonp的執行過程
首先在客戶端注冊一個callback (如:'TestJsonpCallback'), 然后把callback的名字(如:testjsonpcallback)傳給服務器。
注意：
服務端得到callback的數值后，要用TestJsonpCallback(......)把將要輸出的json內容包括起來，此時，服務器生成 json 數據才能被客戶端正確接收。
然后以 javascript 語法的方式，生成一個function， function 名字就是傳遞上來的參數 'callback'的值 TestJsonpCallback.
最后將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標簽，並執行返回的 javascript 文檔，此時javascript文檔數據，作為參數， 傳入到了客戶端預先定義好的 callback 函數.
實例展示
訪問端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery.js"></script> </head> <body> <h1>index</h1> {#<button onclick="fasong">點擊發送</button>#} <p> <input type="button" onclick="Jsonp1();" value='提交'/> </p> <p> <input type="button" onclick="Jsonp2();" value='提交'/> </p> <script> function Jsonp1() { var tag = document.createElement('script'); tag.src = "http://127.0.0.1:8888/data/"; document.head.appendChild(tag); {#document.head.removeChild(tag);#} } function Jsonp2() { $.ajax({ url: "http://127.0.0.1:8888/data/", type: 'GET', dataType: 'JSONP', jsonp: 'callback', {#jsonpCallback: 'asdasdasd',#} success:function (data) { console.log(data) } } ) } </script> </body> </html>
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^jsonp/', views.index), ] urls.py
from django.shortcuts import render def index(request): return render(request,'index.html')
STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )
被訪問端
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^data/', views.data), ] urls.py
from django.shortcuts import render, HttpResponse # Create your views here. def data(request): callback = request.GET.get('callback') return HttpResponse('%s("數據")' % callback)
用訪問端訪問目標主機,目標主機能成功返回 "函數名("參數")" , 表示成功跨域。