同源策略
一個源的定義
同源策略和跨域解決方案
如果兩個頁面的協議，端口（如果有指定）和域名都相同，則兩個頁面具有相同的源。
舉個例子：
下表給出了相對http://a.xyz.com/dir/page.html同源檢測的示例:
| URL | 結果 | 原因 |
|---|---|---|
http://a.xyz.com/dir2/other.html |
成功 | |
http://a.xyz.com/dir/inner/another.html |
成功 | |
https://a.xyz.com/secure.html |
失敗 | 不同協議 ( https和http ) |
http://a.xyz.com:81/dir/etc.html |
失敗 | 不同端口 ( 81和80) |
http://a.opq.com/dir/other.html |
失敗 | 不同域名 ( xyz和opq) |
同源策略是什么
同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以xyz.com下的js腳本采用ajax讀取abc.com里面的文件數據是會被拒絕的。
同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。
不受同源策略限制的
1. 頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
2. 跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。
舉例：
demo1
手寫兩個項目
url.py
from app01 import views urlpatterns = [ # url(r'^admin/', admin.site.urls), url(r'^lulu/$',views.lulu) ]
views.py
def lulu(request): res = {"code": 0, "haha": [1, 2, 3]} data_str = json.dumps(res) return HttpResponse("luhan({})".format(data_str))
demo2
url.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'^haha/$',views.haha) ]
views.py
def haha(request): return render(request, "haha.html")
html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="a1">點我</button> <script> {#var hahaha = "sbbs";#} {#console.log(hahaha)#} function luhan(res) { console.log(res) } </script> <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> {#點擊點我獲取數據#} <script> $("#a1").click(function () { var scriptEle = document.createElement("script"); $(scriptEle).attr("src","http://127.0.0.1:8010/lulu/"); $("body").append(scriptEle); $(scriptEle).remove(); }) </script> {#刷新頁面直接獲取數據#} {#<script src="http://127.0.0.1:8010/lulu/"></script>#} </body> </html>
傳參數也可以實現
簡單使用方法：
2. jsonp（json padding） 1. jsonp的原理是什么？ 利用script標簽繞過同源策略的限制，拿到數據 alex('{name:"alex", "age": 18}') 2. jQuery封裝的jsonp 1. 簡單的getJSON() $.getJSON("http://127.0.0.1:8010/abc/?callback=?",function(){}) 2. 進階的用法 $.ajax({ url: "http://127.0.0.1:8010/abc/", dataType: "jsonp", jsonp: "callback", jsonpCallback: "回調函數名", success:function(res){ // 拿到響應的數據之后要做的事兒 } })
應用舉例，江西電視台：給定一個特定的url，解析數據：
http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>about_jsonp2 xyz</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> </head> <body> <button id="b1">點我</button> <div class="tv-list"> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $("#b1").click(function () { $.ajax({ url: "http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403", dataType: "jsonp", // 指定此次請求是jsonp形式 jsonpCallback: "list", success:function (res) { console.log(res.data); $.each(res.data, function (k1, v1) { var divEle = document.createElement("div"); divEle.innerText = v1.week; $(".tv-list").append(divEle); // 繼續循環list $.each(v1.list, function (k2, v2) { var pEle = ` <p><a href="${v2.link}">${v2.name}</a></p> `; $(divEle).append(pEle); }); }) } }) }) </script> </body> </html>
總結
1. 同源策略 1. 什么叫同源策略 1. 一個源的定義 協議+IP（域名）+端口一致，就是同一個源。 2. 同源策略限制了腳本（js）跨網站發請求，能發請求但是拿不到響應 3. 不受同源策略限制的 1. a標簽、重定向、form表單的提交 2. script、link標簽等不受同源策略的限制，可以引用其他站點內容
2. jsonp（json padding） 1. jsonp的原理是什么？ 利用script標簽繞過同源策略的限制，拿到數據 alex('{name:"alex", "age": 18}') 2. jQuery封裝的jsonp 1. 簡單的getJSON() $.getJSON("http://127.0.0.1:8010/abc/?callback=?",function(){}) 2. 進階的用法 $.ajax({ url: "http://127.0.0.1:8010/abc/", dataType: "jsonp", jsonp: "callback", jsonpCallback: "回調函數名", success:function(res){ // 拿到響應的數據之后要做的事兒 } })