資訊專欄INFORMATION COLUMN
摘要：常見的有等協議如，其中是頂級域名，是主域名，是子域名。就是利用標簽的跨域功能來實現跨域拉取數據的。子框架加載的是你自己可控的頁面，這時候可以分兩種情況主域相同，子域不同可以通過在和父頁面里都設置主域名來實現跨域通信。
http: //zt.jd.com:80/cgi-bin/popuser_menu?tag=4#eduTop
這是一個普通的URL，格式：protocol :// hostname[:port] / path / [?query]#fragment
關系對應如下圖：
在瀏覽器里有一個策略--同源策略--即只有同源的文件之間才能互相通信，否則就會被瀏覽器拒絕。如下圖，在www.jd.com下面的頁面想請求zt.jd.com頁面時是被拒絕的。
那什么是同源，同源就是相同的來源，只有這些資源都來自相同的地方，它們之間才能通信，否則就可能存在安全和隱私問題。通常情況下，同源也叫同域，因為判斷同源的方式就是比對“協議+域名+端口“是否一致。
protocol： 常見的有http, https, ftp等協議
host: 如zt.jd.com,，其中com是頂級域名，jd是主域名，zt是子域名。因此zt.jd.com和www.jd.com是不同源的，m.zt.jd.com和zt.jd.com也是不同源的。
port: 80, 8080等，url不加端口號時默認為80端口，因此對于http ://zt.jd.com和http ://zt.jd.com:80是同源的，而很明顯http ://zt.jd.com和http ://zt.jd.com:8080則是不同源。
對于http ://store.company.com/dir/page.html這個URL來說，MDN上有這樣的描述，基本可以很清晰的說明什么是同源了：
Ajax跨域對于XMLHttpRequest對象，是不支持跨域操作的，你沒辦法在www.jd.com下通過ajax去調用zt.jd.com下的接口，瀏覽器會把請求給拒絕掉。
那瀏覽器到底是拒絕發請求呢？還是拒絕接受響應呢？我們看一下network：
很明顯請求是發出去的，而且響應了200 ok。只是響應內容被瀏覽器屏蔽了，js也無法讀取到。fiddler里面可以看到響應的內容：
那為什么瀏覽器不直接把請求丟掉，而是在響應的時候屏蔽掉呢？因為原則上來講如果服務器允許，客戶端沒理由阻止跨域，因此客戶端必須確認服務器并沒有允許當前域的跨域訪問時才能丟掉這個請求，這就涉及到CORS。
在XMLHttpRequest2里，可以通過服務器設置Access-control-allow-origin響應頭部字段來告訴瀏覽器允許ajax跨域。如下圖，在zt.jd.com下用ajax調用xoa.pp.jd.com下的接口，成功跨域調用。
但畢竟是HTML5的新特性，瀏覽器端的兼容性并不好，因此，目前很少使用這種方式。更多的使用JSONP。
JSONP我們知道在HTML標簽里，有一些特殊的標簽是可以跨域的，比如script, link, img之類的，這些標簽可以提供給我們主動調用第三方資源的能力，方便web開發。由于調用資源的主動權在你自己手里，因此只要你調用自己可信任的資源，不會有什么安全性問題。JSONP就是利用script標簽的跨域功能來實現跨域拉取數據的。 我們來看script標簽的特殊之處在哪里。 通常情況下，script標簽是這樣用的：
還有這樣用的：
也就是說script既可以拉取數據，也可以執行代碼。那假如，我們用它來拉取一個跨域的接口，我們怎樣才能把接口返回的數據拿來用呢？很明顯，那就是讓接口在返回數據的同時，還要返回操作這些數據的js代碼。比如：
但是這種方式存在兩個弊端：依賴問題和阻塞問題。你必須確保那個拉取數據的script標簽是先執行了，而后面的代碼必須等它執行完才能執行。那么，就使用異步回調唄。如下：
先定義一個回調函數，然后把拉取數據的script標簽改為異步拉取。這樣拉取成功后會調用定義好的回調函數來進行數據處理。這樣就不用理會依賴問題，script標簽可以不考慮先后順序，因為異步必須在同步代碼完成后才執行。但是，這樣還存在一個問題，那就是接口通用性受到了限制，因為必須返回一句寫死的renderData(data)代碼，拉取這個接口的頁面總是必須定義一個叫做renderData的函數。于是，聰明的人又想到了解決辦法，那就是用傳參的方式告訴接口給我返回什么回調函數，這樣我想定義一個renderData1也行，renderData2也行，接口的通用性就大大提高了。如下：
接口讀出參數callback，并把它返回即可。這樣我傳給接口render1它就返回render1，render2就返回render2。
這就是JSONP，一般會封裝成一個類似于ajax的函數，直接傳參即可動態創建script標簽實現跨域請求。但是，這里有必要說明一點，JSONP接口通過CSRF很容易被惡意拉取到敏感信息，你可以構造頁面讓目標用戶打開，因為callback的存在，你能將拉取到的用戶信息上傳到自己的服務器，因此需做好防范。
跨域與Iframeiframe是一個特殊的標簽，可以在頁面里面加載別的頁面。
既然有加載別的頁面的能力，那在非同源下必定是要受到同源策略限制的，否則，我們就能隨便讀取任意網站的cookie了。
非同源情況下，默認是阻止父框架與子框架之間的通信的，但可以分為兩種情況：
子框架加載的URL是一個第三方頁面時：你能做的僅僅就是把它展現出來，而沒有任何能力去訪問它。
子框架加載的URL是你自己可控的頁面，這時候可以分兩種情況：
主域相同，子域不同：可以通過在iframe和父頁面里都設置document.domain=主域名來實現跨域通信。
主域不同：這種情況只能通過一些奇淫異巧來實現簡單的通信。有兩種情況：
父框架向子框架通信：父框架通過改變iframe的src的hash值，iframe監聽自身location.hash即可獲取到父框架設置的參數，從而實現信息的傳遞。但數據量收到url長度的限制。
子框架向父框架通信：大家或許會想那直接逆向一下設置location.hash不就行了嗎。事實上是不行的，在iframe里設置location.hash是無法更新到iframe的src值的。因此，還得再嵌入一個跟父框架同源的iframe到子框架里，然后通過“父框架向子框架通信”的方式讓子框架傳遞信息給“孫框架"，然后父框架再去讀”孫框架“就行了。
同源情況下，無需設置即可雙向通信。但是，假如父頁面和子頁面任何一方設置了document.domain，都會導致瀏覽器的跨域攔截，即使document.domain就是當前的domain也不行。也就是說，要么都不設置，要么都設置。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79654.html
摘要：使用進行的仿手機的的制作，在上，參考了設計師的作品，作品由個人獨立開發，源碼中進行了詳細的注釋。關于接入聊天機器人遇到的跨域問題起初，天真的以為官方應該提供了用的接口，然而沒有找到。 使用Vue2進行的仿手機QQ的webapp的制作，在ui上，參考了設計師kaokao的作品，作品由個人獨立開發，源碼中進行了詳細的注釋。 由于自己也是初學Vue2，所以注釋寫的不夠精簡，請見諒。 目前已實...
摘要：同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。使用跨域由于同源策略，一般來說位于的網頁無法與不是的服務器溝通，而的元素是一個例外。 本菜雞最近在寫某個頁面請求數據時，報了如下的錯誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要：同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。使用跨域由于同源策略，一般來說位于的網頁無法與不是的服務器溝通，而的元素是一個例外。 本菜雞最近在寫某個頁面請求數據時，報了如下的錯誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要：同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。使用跨域由于同源策略，一般來說位于的網頁無法與不是的服務器溝通，而的元素是一個例外。 本菜雞最近在寫某個頁面請求數據時，報了如下的錯誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
閱讀 2780·2021-09-23 11:44
閱讀 1671·2021-09-13 10:24
閱讀 2619·2021-09-08 09:36
閱讀 1231·2019-08-30 15:54
閱讀 2248·2019-08-30 13:54
閱讀 3308·2019-08-30 10:57
閱讀 1844·2019-08-29 18:43
閱讀 3609·2019-08-29 15:10
