跨域和JSONP
同源策略和跨域
同源策略
什麼是同源
如果兩個頁面的協議，域名和埠都相同，則兩個頁面具有相同的源。
例如，下表給出了相對於 http://www.text.com/index.html 頁面的同源檢測：
| URL | 是否同源 | 原因 |
|---|---|---|
| http://www.text.com/other.html | 是 | 同源（協議、域名、埠相同） |
| https://www.text.com/about.html | 否 | 協議不同（ http 與 https ） |
| http://blog.text.com/movie.html | 否 | 域名不同（www.text.com 與 blog.text.com ) |
| http://www.text.com:7001/home.html |
否 | 埠不同（預設的 80 埠與 7001 埠） |
| http://www.text.com:80/main.html | 是 | 同源（協議、域名、埠相同） |
什麼是同源策略
同源策略（英文全稱 Same origin policy ）是瀏覽器提供的一個安全功能。
MDN 官方給定的概念：同源策略限制了從同一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的重要安全機制。
通俗的理解：瀏覽器規定，A 網站的 JavaScript，不允許和非同源的網站 C 之間，進行資源的互動，例如：
- 無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB。
- 無法接觸非同源網頁的 DOM。
- 無法向非同源地址傳送 Ajax 請求。
跨域
什麼是跨域
同源指的是兩個 URL 的協議、域名、埠一致，反之，則是跨域。
出現跨域的根本原因：瀏覽器的同源策略不允許非同源的 URL 之間進行資源的互動。
網頁：http://www.test.com/index.html
介面：http://www.api.com/userlist
瀏覽器對跨域請求的攔截
注意：瀏覽器允許發起跨域請求，但是，跨域請求回來的資料，會被瀏覽器攔截，無法被頁面獲取到！
如何實現跨域資料請求
現如今，實現跨域資料請求，最主要的兩種解決方案，分別是 JSONP 和 CORS。
JSONP：出現的早，相容性好（相容低版本 IE ）。是前端程式設計師為了解決跨域問題，被迫想出來的一種臨時解決方案
CORS：出現的較晚，它是 W3C 標準，屬於跨域 Ajax 請求的根本解決方案。支援 GET 和 POST 請求。缺點是不相容某些低版本的瀏覽器。
JSONP
什麼是 JSONP
JSONP（JSON with Padding）是 JSON 的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題。
JSONP 的實現原理
由於瀏覽器同源策略的限制，網頁中無法通過 Ajax 請求非同源的介面資料。但是 <script> 標籤不受瀏覽器同源策略的影響，可以通過 src 屬性，請求非同源的 js 指令碼
因此，JSONP 的實現原理，就是通過