資訊專欄INFORMATION COLUMN
摘要：注為頂級域名，為二級域名，為三級域名跨域并非瀏覽器限制了發(fā)起跨站請求，而是跨站請求可以正常發(fā)起，但返回結果被瀏覽器攔截了。四總結首先在客戶端注冊一個，然后把的名字傳給服務器。
前言
博主博客：Stillwater的博客
知乎專欄：前端汪汪
本文為作者原創(chuàng)轉載請注明出處：http://hiztx.top/2017/01/15/j...
??本文介紹了什么是跨域，為什么要跨域，以及跨域的一種常用方法JSONP的原理。
一、什么是跨域？為什么要跨域？ 什么是跨域？??既然是跨域，那么肯定是從一個域到另一個域。那么首先要知道滿足什么條件才是同一個域。如果兩個頁面擁有相同的協議，端口和域名，那么這兩個頁面就屬于同一個源（origin），JavaScript允許這種同源頁面的數據互相通信。例如你要訪問百度首頁。
https://www.baidu.com
https是協議
https協議的默認端口為443（不顯示）
www.baidu.com為域名
注：一般端口默認為不顯示，但是你可以嘗試輸入以下網址，發(fā)現無法訪問。因為80端口默認為http協議端口。
https://www.baidu.com:80
??現在知道了什么是同一個域，那么就可以解釋什么是跨域。只要協議、域名、端口有任何一個不同，都被當作是不同的域，之間的請求就是跨域操作。
為什么要跨域？??相信很多人都聽過，同源策略。出于安全考慮，瀏覽器對JavaScript的很多功能進行了限制，其中一條就是，不同域之間不予許進行數據通信。雖然補全了安全漏洞，但是這個限制給前端開發(fā)帶來了許多不便。例如：
zhidao.baidu.com
wenku.baidu.com
??百度知道和百度文庫大家都不陌生，都是百度開發(fā)的web服務。雖然這兩個都是李彥宏的，但是現在告訴他，由于你這兩個域名的三級域名不一樣，不允許相互數據通信。你說不行就不行？于是就有像李彥宏這樣的大牛搞出一些黑科技專門用來跨域通信。JSONP就是其中之一。
二、什么是JSONP？注：
1.com為頂級域名，baidu為二級域名，zhidao/wenku為三級域名
2.跨域并非瀏覽器限制了發(fā)起跨站請求，而是跨站請求可以正常發(fā)起，但返回結果被瀏覽器攔截了。
顧名思義：
JSONP = JSON + P
??JSONP（JSON with Padding），JSON是一種輕量級的數據交換格式。而Padding在這里可以翻譯為填充。那么JSONP的意思就是，填充的JSON。是數據格式JSON的一種使用模式，可以讓網頁從別的網域要數據。
三、JSONP原理JSONP的核心原理就是，HTML的script標簽可以加載并執(zhí)行其他域JS文件。
??這里區(qū)分兩個概念，當我們用瀏覽器打開百度知道首頁的時候，是向百度知道服務器發(fā)送了一個Https請求，獲取到百度知道首頁的index.html。如果在這個index.html里面用XMLHttpRequest對象向百度文庫服務器發(fā)送Https請求，那么就屬于跨域，是不允許的。但是如果在百度知道首頁的index.html中加入一個script標簽，其src屬性指向百度文庫中的一個.json文件，是允許的。
??為了理解這種模式的原理，先想像有一個回傳JSON文件的URL，而JavaScript 程序可以用XMLHttpRequest跟這個URL要數據。假設我們的URL是 http://server2.example.com/Re... 。假設小明的UserId 是1823，且當瀏覽器通過URL傳小明的UserId，也就是抓取 http://server2.example.com/Re... 。得到：
{"Name": "小明",
"Id": 1823,
"Rank": 7
}
??這個JSON數據可能是依據傳過去URL的查詢參數動態(tài)產生的。這個時候，把 script元素的src屬性設成一個回傳JSON的URL是可以想像的，這也代表從HTML頁面通過script元素抓取JSON是可能的。然而，一份JSON文件并不是一個JavaScript程序。為了讓瀏覽器可以在 script元素運行，從src里URL回傳的必須是可運行的JavaScript。在JSONP的使用模式里，該URL回傳的是由函數調用包起來的動態(tài)生成JSON，這就是JSONP的“填充（padding）”或是“前輟（prefix）”的由來。
??服務器會在傳給瀏覽器前將JSON數據填充到回調函數（parseResponse）中。瀏覽器得到的回應已不是單純的數據敘述而是一個腳本。在本例中，瀏覽器得到的是：
{
parseResponse(
{
"Name": "小明",
"Id": 1823,
"Rank": 7
})
}
??也就是說，一般情況下瀏覽器向服務器發(fā)送請求得到的都是數據（文本，XML，JSON），但是當采用JSONP技術時候，瀏覽器向跨域服務器發(fā)送請求，得到的是回調函數包住的JSON。此處JSON作為參數傳入回調函數，然后再返回給瀏覽器。
再舉個例子：瀏覽器端：
服務器端：
服務器返回瀏覽器：
jsonpcallback(
{
"name": "Stillwater",
"age": 12
}
)
??在這個例子中，瀏覽器向服務器發(fā)出跨域請求 http://localhost:8080/test.ph... 。請求一個json數據, {"name": "Stillwater","age": 12} 。并且告訴了服務器回調函數的名字。服務器接收到請求后，就將json數據作為參數填充到回調函數中，返回給瀏覽器。最終返回一個填充了json數據的回調函數。
四、總結首先在客戶端注冊一個callback，然后把callback的名字傳給服務器。
服務器先生成json數據。然后以Javascript語法的方式，生成一個function ，function名字就是傳遞上來的參數callback。 最后將json數據直接以入參的方式，放置到function中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標簽，并執(zhí)行返回的Javascript 文檔，此時數據作為參數，傳入到了客戶端預先定義好的callback 函數里。（動態(tài)執(zhí)行回調函數）
參考鏈接：
https://zh.wikipedia.org/wiki...
http://www.cnblogs.com/zichi/...
http://tech.jandou.com/cross-...
https://segmentfault.com/a/11...
http://wearejq.github.io/2015...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/81226.html
摘要：瀏覽器端需要設置響應頭的，，等字段，指定允許的方法，頭部，源等信息?？梢酝ㄟ^前后端約定一個字段名，比如，來傳遞一個函數名，從而使得前端可以使用對應的函數，拿到數據，處理數據。 原文地址：https://github.com/HolyZheng/... 了解幾個跨域的方案，并且通過簡單實踐進行體會。 如何實踐？ 但是，我們如何進行實踐呢？在哪發(fā)請求？向什么服務器發(fā)請求？很簡單，就在當前...
摘要：同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。使用跨域由于同源策略，一般來說位于的網頁無法與不是的服務器溝通，而的元素是一個例外。 本菜雞最近在寫某個頁面請求數據時，報了如下的錯誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要：同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。使用跨域由于同源策略，一般來說位于的網頁無法與不是的服務器溝通，而的元素是一個例外。 本菜雞最近在寫某個頁面請求數據時，報了如下的錯誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
閱讀 2741·2021-11-22 15:22
閱讀 1653·2021-11-22 14:56
閱讀 3629·2021-09-22 15:12
閱讀 2415·2021-09-02 15:41
閱讀 2139·2021-08-27 16:26
閱讀 1126·2019-08-30 15:55
閱讀 2151·2019-08-29 17:30
閱讀 679·2019-08-29 16:26
