什麼是同源政策？
“同源”是指“三個相同”：
- 協議相同
- 域名相同
- 端口相同
目的
同源政策的目的，是爲了保證用戶信息的安全，防止惡意的網站竊取數據。
限制範圍
目前，如果非同源，共有三種行爲受到限制。
(1) 無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB。
(2) 無法接觸非同源網頁的 DOM。
(3) 無法向非同源地址發送 AJAX 請求（可以發送，但瀏覽器會拒絕接受響應）。
jonsp跨域的原理
我們知道，頁面上有三種資源是可以與頁面本身不同源的：
- js腳本
- css樣式文件
- img
它們是可以鏈接訪問到不同源的資源的。
當鏈接的資源到達瀏覽器時，瀏覽器會根據他們的類型採取不同的處理方式，如果是css文件，會對頁面進行repaint或reflow；如果是圖片，則會將圖片渲染出來；如果是srcipt腳本，則會執行腳本。
而JSONP就是利用<script>標籤可以鏈接到不同源的js腳本來達到跨域目的。
script、link、img等標籤引入資源，都是get請求，那麼就決定了JSONP一定是get方式的。
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp跨域</title>
</head>
<body>
<script type="text/javascript">
function addScript (src) {
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = src
document.body.appendChild(script)
}
function getData (data) {
console.log(data) // {name: "Laumlin", url: "www.laumlin.com"}
}
window.onload = function () {
addScript('data.json?callback=getData')
}
</script>
</body>
</html>
// data.json
getData({
"name": "Laumlin",
"url": "www.laumlin.com"
})
總結
JSONP的原理：利用 script標籤 的 src屬性 進行跨域請求，服務器響應函數調用傳參。