前端解決跨域問題的8種方案(最新最全)
1.同源策略如下:
URL | 說明 | 是否允許通訊 |
---|---|---|
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允許 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同資料夾 | 允許 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同埠 | 不允許 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同協議 | 不允許 |
http://www.a.com/a.js http://70.32.92.74/b.js |
域名和域名對應ip | 不允許 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 不允許 |
http://www.a.com/a.js http://a.com/b.js |
同一域名,不同二級域名(同上) | 不允許(cookie這種情況下也不允許訪問) |
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 不允許 |
- 特別注意兩點:
- 第一,如果是協議和埠造成的跨域問題“前臺”是無能為力的,
- 第二:在跨域問題上,域僅僅是通過“URL的首部”來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。
- “URL的首部”指window.location.protocol +window.location.host,也可以理解為“Domains, protocols and ports must match”。
2. 前端解決跨域問題
1> document.domain + iframe (只有在主域相同的時候才能使用該方法)
1) 在www.a.com/a.html中:
document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://www.script.a.com/b.html'; ifr.display = none; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document;//在這裡操作doc,也就是b.html ifr.onload = null; };
2) 在www.script.a.com/b.html中:
document.domain = 'a.com';
2> 動態建立script
這個沒什麼好說的,因為script標籤不受同源策略的限制。
function loadScript(url, func) { var head = document.head || document.getElementByTagName('head')[0]; var script = document.createElement('script'); script.src = url; script.onload = script.onreadystatechange = function(){ if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){ func(); script.onload = script.onreadystatechange = null; } }; head.insertBefore(script, 0); } window.baidu = { sug: function(data){ console.log(data); } } loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')}); //我們請求的內容在哪裡? //我們可以在chorme除錯面板的source中看到script引入的內容
3> location.hash + iframe
原理是利用location.hash來進行傳值。
假設域名a.com下的檔案cs1.html要和cnblogs.com域名下的cs2.html傳遞資訊。
1) cs1.html首先建立自動建立一個隱藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html頁面
2) cs2.html響應請求後再將通過修改cs1.html的hash值來傳遞資料
3) 同時在cs1.html上加一個定時器,隔一段時間來判斷location.hash的值有沒有變化,一旦有變化則獲取獲取hash值
注:由於兩個頁面不在同一個域下IE、Chrome不允許修改parent.location.hash的值,所以要藉助於a.com域名下的一個代理iframe
程式碼如下:
先是a.com下的檔案cs1.html檔案:
function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo'; document.body.appendChild(ifr); } function checkHash() { try { var data = location.hash ? location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is '+data); } } catch(e) {}; } setInterval(checkHash, 2000);
cnblogs.com域名下的cs2.html:
//模擬一個簡單的引數處理操作 switch(location.hash){ case '#paramdo': callBack(); break; case '#paramset': //do something…… break; } function callBack(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome的安全機制無法修改parent.location.hash, // 所以要利用一箇中間的cnblogs域下的代理iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; // 注意該檔案在"a.com"域下 document.body.appendChild(ifrproxy); } }
a.com下的域名cs3.html
//因為parent.parent和自身屬於同一個域,所以可以改變其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1);
4> window.name + iframe
window.name 的美妙之處:name 值在不同的頁面(甚至不同域名)載入後依舊存在,並且可以支援非常長的 name 值(2MB)。
1) 建立a.com/cs1.html
2) 建立a.com/proxy.html,並加入如下程式碼
<head> <script> function proxy(url, func){ var isFirst = true, ifr = document.createElement('iframe'), loadFunc = function(){ if(isFirst){ ifr.contentWindow.location = 'http://a.com/cs1.html'; isFirst = false; }else{ func(ifr.contentWindow.name); ifr.contentWindow.close(); document.body.removeChild(ifr); ifr.src = ''; ifr = null; } }; ifr.src = url; ifr.style.display = 'none'; if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc); else ifr.onload = loadFunc; document.body.appendChild(iframe); } </script> </head> <body> <script> proxy('http://www.baidu.com/', function(data){ console.log(data); }); </script> </body>
3 在b.com/cs1.html中包含:
<script> window.name = '要傳送的內容'; </script>
5> postMessage(HTML5中的XMLHttpRequest Level 2中的API)
1) a.com/index.html中的程式碼:
<iframe id="ifr" src="b.com/index.html"></iframe> <script type="text/javascript"> window.onload = function() { var ifr = document.getElementById('ifr'); var targetOrigin = 'http://b.com'; // 若寫成'http://b.com/c/proxy.html'效果一樣 // 若寫成'http://c.com'就不會執行postMessage了 ifr.contentWindow.postMessage('I was there!', targetOrigin); }; </script>
2) b.com/index.html中的程式碼:
<script type="text/javascript"> window.addEventListener('message', function(event){ // 通過origin屬性判斷訊息來源地址 if (event.origin == 'http://a.com') { alert(event.data); // 彈出"I was there!" alert(event.source); // 對a.com、index.html中window物件的引用 // 但由於同源策略,這裡event.source不可以訪問window物件 } }, false); </script>
6> CORS
CORS背後的思想,就是使用自定義的HTTP頭部讓瀏覽器與伺服器進行溝通,從而決定請求或響應是應該成功,還是應該失敗。
IE中對CORS的實現是xdr
var xdr = new XDomainRequest(); xdr.onload = function(){ console.log(xdr.responseText); } xdr.open('get', 'http://www.baidu.com'); ...... xdr.send(null);
其它瀏覽器中的實現就在xhr中
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){ console.log(xhr.responseText); } } } xhr.open('get', 'http://www.baidu.com'); ...... xhr.send(null);
實現跨瀏覽器的CORS
function createCORS(method, url){ var xhr = new XMLHttpRequest(); if('withCredentials' in xhr){ xhr.open(method, url, true); }else if(typeof XDomainRequest != 'undefined'){ var xhr = new XDomainRequest(); xhr.open(method, url); }else{ xhr = null; } return xhr; } var request = createCORS('get', 'http://www.baidu.com'); if(request){ request.onload = function(){ ...... }; request.send(); }
7> JSONP
JSONP包含兩部分:回撥函式和資料。
回撥函式是當響應到來時要放在當前頁面被呼叫的函式。
資料就是傳入回撥函式中的json資料,也就是回撥函式的引數了。
function handleResponse(response){ console.log('The responsed data is: '+response.data); } var script = document.createElement('script'); script.src = 'http://www.baidu.com/json/?callback=handleResponse'; document.body.insertBefore(script, document.body.firstChild); /*handleResonse({"data": "zhe"})*/ //原理如下: //當我們通過script標籤請求時 //後臺就會根據相應的引數(json,handleResponse) //來生成相應的json資料(handleResponse({"data": "zhe"})) //最後這個返回的json資料(程式碼)就會被放在當前js檔案中被執行 //至此跨域通訊完成
jsonp雖然很簡單,但是有如下缺點:
1)安全問題(請求程式碼中可能存在安全隱患)
2)要確定jsonp請求是否失敗並不容易
8> web sockets
web sockets是一種瀏覽器的API,它的目標是在一個單獨的持久連線上提供全雙工、雙向通訊。(同源策略對web sockets不適用)
web sockets原理:在JS建立了web socket之後,會有一個HTTP請求傳送到瀏覽器以發起連線。取得伺服器響應後,建立的連線會使用HTTP升級從HTTP協議交換為web sockt協議。
只有在支援web socket協議的伺服器上才能正常工作。
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss socket.send('hello WebSockt'); socket.onmessage = function(event){ var data = event.data; }
相關推薦
前端解決跨域問題的8種方案(最新最全)
1.同源策略如下: URL 說明 是否允許通訊 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允許 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同資料夾 允許
Android SDK版本和API Level對照表(最新最全)
在開發時我們會經常用到相容api版本,難保可用把全部都記得住,這裡有最快捷實用的方法進行檢視:開啟Android Studio ,然後點選SDK Manneger ,參考下圖示例: 下面列出最
spring-cloud學習教程/視訊(最新最全)
下載地址: 課程目錄 第1篇 分散式開發與SpringCloud簡介 小節1: 分散式開發簡介 小節2: 線上筆記 分散式開發簡介 小節3: SpringCl
前端解決跨域問題的8種方案
1.同源策略如下: URL 說明 是否允許通訊 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允許 http://www.a.com/lab/a.js http://www.a.com/script/b.j
前端解決跨域問題---CORS
CORS能做什麼: 正常使用AJAX會需要正常考慮跨域問題,所以偉大的程式設計師們又折騰出了一系列跨域問題的解決方案,如JSONP、flash、ifame、xhr2等等。 CORS的原理: CORS定義一種跨域訪問的機制,可以讓AJAX實現跨域訪問。CORS 允
跨域兩種方案
text accept console roc 瀏覽器 plain option lba tps 跨域中間件文件 JsonP解決 客戶端 通過js代碼動態script標簽,將請求生成src 定義一個回調函數 服務端 獲取到回調函數名 返回數據格式:函數名(數據
Java Gui中解決遊戲閃爍的初級方案(雙緩衝技術)
在Java中,需要呼叫paint()方法將你所想要的東西畫在你自己定義好的LaunchFrame()裡面。但是如果每一次都立刻將Paint()方法裡面的東西畫到LaunchFrame()上,由於每一塊顯示卡承受重新整理頻率的能力強弱不一樣,所以很容易就出現了閃爍現象,現記錄
JSONP跨域獲取JSON資料(含jQuery方法)——李帥醒部落格
首先我要強調JSONP和AJAX沒有半毛錢關係,別把他們混淆!!!只不過他們都是從後臺獲取資料的方法! 前言: 說到AJAX就會不可避免的面臨兩個問題,第一個是AJAX以何種格式來交換資料?第二個
解決有關flask-socketio中服務端和客戶端回調函數callback參數的問題(全網最全)
分享圖片 ready 發現 ted doc 客戶端 event return 建立 由於工作當中需要用的flask_socketio,所以自己學習了一下如何使用,查閱了有關文檔,當看到回調函數callback的時候,發現文檔裏都描述的不太清楚,最後終於琢磨出來了,分享給有
大數據全棧開發工程師培訓課程(2018最新最全)
大數據大數據全棧開發工程師(2018最新最全)課程學習地址:http://www.xuetuwuyou.com/course/230課程出自學途無憂網:http://www.xuetuwuyou.com 課程大綱(分四大階段)第一階段:Java開發階段第二階段:大數據階段第三階段:機器學習階段第四階段:大數據
Android熱修復技術原理詳解(最新最全版本)
總結 核心 桌面圖標 實時 開源 穩定性 安卓 定義 check 本文框架 什麽是熱修復? 熱修復框架分類 技術原理及特點 Tinker框架解析 各框架對比圖 總結 ??通過閱讀本文,你會對熱修復技術有更深的認知,本文會列出各類框架的優缺點以及技術原理,文章末尾簡單描述
從原始碼角度看Spring生命週期(官方最全)
Spring在beanfactory中給出了spring的生命週期的list列表 一、bean初始化前的處理 Bean factory implementations should support the standard bean lifecycle interfaces as
java設計模式精講 Debug 方式+記憶體分析(目前最全)
第1章 課程導學(提供問答區答疑解惑)本章節主要講解大家能收穫什麼,課程具體包含哪些內容,通過哪些方式來學習設計模式,以及怎麼講,怎麼安排,通過本章的學習,讓大家為整個課程高效的學習打下基礎。1-1 課程導學第2章 UML急速入門本章節主要講解UML基礎、UML類圖、
React 伺服器渲染原理解析與實踐(目前最全)
第1章 伺服器端渲染基礎本章主要講解客戶端與伺服器端渲染的概念,分析客戶端渲染和伺服器端渲染的利弊,帶大家對伺服器端渲染有一個粗淺認識。1-1 課程導學1-2 什麼是伺服器端渲染1-3 什麼是客戶端渲染1-4 React 客戶端渲染的優勢與弊端第2章 React中的伺服器
Hadoop分散式安裝(全網最全)帶註釋
大家好,今天給大家配置下hadoop叢集模式,完全分散式, 配置需求 3臺節點 前提:有3臺乾淨的機器,並且安裝好jdk,SSH免密登陸要配置好 話不多說,直接開幹 1、安裝之前首先確保你已經安裝了JDK,配置好了SSH免密登陸 如果SSH沒有配好的話,https://mp.cs
Oozie安裝時放置Mysql驅動包的總結(網上最全)
不多說,直接上乾貨! 對於在oozie裡放置Mysql驅動包的總結 根據網上的參考以及我個人經驗安裝的使用 (1)放一份到$OOZIE_HOME/libext下 (是 mysql-connector-java-5.1.21.jar)(這裡放到bigdatamaster節點)
Java併發程式設計高階技術-高效能併發框架原始碼解析與實戰(目前最全)
第1章 課程介紹(Java併發程式設計進階課程) 什麼是Disruptor?它一個高效能的非同步處理框架,號稱“單執行緒每秒可處理600W個訂單”的神器,本課程目標:徹底精通一個如此優秀的開源框架,面試秒殺面試官。本章會帶領小夥伴們先了解課程大綱與重點,然後模擬千萬,億級
前端常見跨域解決方案(全)
-type crm api war str bsp 斷開 jquery 數據塊 什麽是跨域? 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源,這裏跨域是廣義的。 廣義的跨域: 1.) 資源跳轉: A鏈接、重定向、表單提交 2.) 資源嵌入: <link
前端常見跨域解決方案
自定義 兩個 ech cors onload 消息 strong put 普通 什麽是跨域? 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源,這裏跨域是廣義的。 廣義的跨域: 1.) 資源跳轉: A鏈接、重定向、表單提交 2.) 資源嵌入:<lin
前端JS跨域解決方案
JS跨域請求 這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向一個不同的域請求資料,或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同,都被當作是不同的域 跨域解決方案 CORS方案 COR