1. 程式人生 > >前端跨域知識總結

前端跨域知識總結

最終,輸出結果為:dosomething([‘a’,’b’,’c’]);

如果你的頁面使用jquery,那麼通過它封裝的方法就能很方便的來進行jsonp操作了。

12345 <script type="text/javascript">$.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){//處理獲得的json資料});</script>

jquery會自動生成一個全域性函式來替換callback=?中的問號,之後獲取到資料後又會自動銷燬,實際上就是起一個臨時代理函式的作用。$.getJSON方法會自動判斷是否跨域,不跨域的話,就呼叫普通的ajax方法;跨域的話,則會以非同步載入js檔案的形式來呼叫jsonp的回撥函式。

  • JSONP的優缺點
    • JSONP的優點是:它不像XMLHttpRequest物件實現的Ajax請求那樣受到同源策略的限制;它的相容性更好,在更加古老的瀏覽器中都可以執行,不需要XMLHttpRequest或ActiveX的支援;並且在請求完畢後可以通過呼叫callback的方式回傳結果。
    • JSONP的缺點則是:它只支援GET請求而不支援POST等其它型別的HTTP請求;它只支援跨域HTTP請求這種情況,不能解決不同域的兩個頁面之間如何進行JavaScript呼叫的問題。

6. 通過CORS跨域

CORS(Cross-Origin Resource Sharing)跨域資源共享,定義了必須在訪問跨域資源時,瀏覽器與伺服器應該如何溝通。CORS背後的基本思想就是使用自定義的HTTP頭部讓瀏覽器與伺服器進行溝通,從而決定請求或響應是應該成功還是失敗。目前,所有瀏覽器都支援該功能,IE瀏覽器不能低於IE10。整個CORS通訊過程,都是瀏覽器自動完成,不需要使用者參與。對於開發者來說,CORS通訊與同源的AJAX通訊沒有差別,程式碼完全一樣。瀏覽器一旦發現AJAX請求跨源,就會自動新增一些附加的頭資訊,有時還會多出一次附加的請求,但使用者不會有感覺。

因此,實現CORS通訊的關鍵是伺服器。只要伺服器實現了CORS介面,就可以跨源通訊。

平時的ajax請求可能是這樣的:

12345 <script type="text/javascript">varxhr=newXMLHttpRequest();xhr.open("POST","/damonare",true);xhr.send();</script>

以上damonare部分是相對路徑,如果我們要使用CORS,相關Ajax程式碼可能如下所示:

12345 <script type="text/javascript">varxhr=newXMLHttpRequest();xhr.open("GET","http://segmentfault.com/u/trigkit4/",true);xhr.send();</script>

程式碼與之前的區別就在於相對路徑換成了其他域的絕對路徑,也就是你要跨域訪問的介面地址。

伺服器端對於CORS的支援,主要就是通過設定Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設定,就可以允許Ajax進行跨域的訪問。關於CORS更多瞭解可以看下阮一峰老師的這一篇文章:跨域資源共享 CORS 詳解

  • CORS和JSONP對比
    • JSONP只能實現GET請求,而CORS支援所有型別的HTTP請求。
    • 使用CORS,開發者可以使用普通的XMLHttpRequest發起請求和獲得資料,比起JSONP有更好的錯誤處理。
    • JSONP主要被老的瀏覽器支援,它們往往不支援CORS,而絕大多數現代瀏覽器都已經支援了CORS)。

CORS與JSONP相比,無疑更為先進、方便和可靠。

7. 通過window.name跨域

window物件有個name屬性,該屬性有個特徵:即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name的,每個頁面對window.name都有讀寫的許可權,window.name是持久存在一個視窗載入過的所有頁面中的,並不會因新頁面的載入而進行重置。

比如:我們在任意一個頁面輸入

1234 window.name="My window's name";setTimeout(function(){window.location.href="http://damonare.cn/";},1000)

進入damonare.cn頁面後我們再檢測再檢測 window.name :

1 window.name;// My window's name

可以看到,如果在一個標籤裡面跳轉網頁的話,我們的 window.name 是不會改變的。
基於這個思想,我們可以在某個頁面設定好 window.name 的值,然後跳轉到另外一個頁面。在這個頁面中就可以獲取到我們剛剛設定的 window.name 了。

由於安全原因,瀏覽器始終會保持 window.name 是string 型別。

同樣這個方法也可以應用到和iframe的互動來:
比如:我的頁面(http://damonare.cn/index.html)中內嵌了一個iframe:

JavaScript
1 <iframe id="iframe"src="http://www.google.com/iframe.html"></iframe>

在 iframe.html 中設定好了 window.name 為我們要傳遞的字串。
我們在 index.html 中寫了下面的程式碼:

123456 variframe=document.getElementById('iframe');vardata='';iframe.onload=function(){data=iframe.contentWindow.name;};

Boom!報錯!肯定的,因為兩個頁面不同源嘛,想要解決這個問題可以這樣幹:

123456789 variframe=document.getElementById('iframe');vardata='';iframe.onload=function(){iframe.onload=function(){data=iframe.contentWindow.name;}iframe.src='about:blank';};

或者將裡面的 about:blank 替換成某個同源頁面(about:blank,javascript: 和 data: 中的內容,繼承了載入他們的頁面的源。)

這種方法與 document.domain 方法相比,放寬了域名字尾要相同的限制,可以從任意頁面獲取 string 型別的資料。

後記

其它諸如中介軟體跨域,伺服器代理跨域,Flash URLLoader跨域,動態建立script標籤(簡化版本的jsonp)不作討論。

參考文章:

相關推薦

前端知識總結

最終,輸出結果為:dosomething([‘a’,’b’,’c’]); 如果你的頁面使用jquery,那麼通過它封裝的方法就能很方便的來進行jsonp操作了。 <script type="text/javascript"> $.get

前端解決方法總結

同源策略: 所謂同源策略,指的是瀏覽器對不同源的指令碼或者文字的訪問方式進行的限制。 同源:協議相同,域名相同,埠相同。 同源策略主要帶來三個方面的行為限制: 1、cookie,localstorage和IndexDB無法讀取 2、DOM無法獲取 3

Nginx學習總結(9)——前端問題解決

1.什麼是跨域以及產生原因   跨域是指a頁面想獲取b頁面資源,如果a、b頁面的協議、域名、埠、子域名不同,或是a頁面為ip地址,b頁面為域名地址,所進行的訪問行動都是跨域的,而瀏覽器為了安全問題一

前端幾種方式

div ner dev 修改 ati hash 標簽 nbsp 端口 跨域問題的直接原因是瀏覽器存在同源策略,瀏覽器同源指的是:兩個頁面的協議、端口和主機相同,則兩個頁面具有相同的源。IE下滿足協議、主機相同,就認為是同源。 想象一下,如果沒有同源策略,誰都可以修改你站點

前端的解決方式

指定 模式 輸出 enc oauth t對象 TTT 註意 pos 前端與服務端數據交互時,涉及到跨域的一些問題。JavaScript出於安全的考慮,禁止了跨域調用其他頁面的對象,也即同源策略限制了一個源(origin)中加載文本或腳本與來自其它源(origin)中資源的交

使用nginx反向代理解決前端問題

接口 tcp type rec access req start gin keepal 1. 首先去Nginx官網下載一個最新版本的Nginx,下載地址:http://nginx.org/en/download.html。我這裏下載的版本是:nginx/Windows-1.

CORS請求總結

eve log 那種 http lencod pos 方法 ref orm CORS跨域請求分為簡單請求和復雜請求。 1. 簡單請求: 滿足一下兩個條件的請求。 (1) 請求方法是以下三種方法之一: HEAD GET POST (2)HTTP的頭信息不超出以下幾種字段:

作用知識總結

谷歌瀏覽器 堆內存、棧內存 泄露 move set blog 有一個 點擊事件 自己 window全局作用域->頁面關掉才銷毀 函數執行會形成私有的作用域 1)作用域的銷毀 一般情況下,函數執行形成一個私有的作用域,當執行完成後就銷毀了->節省內存空間 2

前端

hello 高級 php 綁定 () serve loaded oss cross 聲明:原文出自:http://blog.csdn.net/kongjiea/article/details/44201021 前言 受瀏覽器同源策略的限制,本域的js不能操作其他域的

【HAVENT原創】前端一站式登錄實現 ( iframe + window.name )

不同的 rip 控制臺 tool 數據信息 als 前端 reat proxy 從網上搜集了一些資料,window.name 傳輸技術,關於window.name的這樣一個特性:name 值在不同的頁面(甚至不同域名)加載後依舊存在,並且可以支持非常長的 name 值(2M

前端之jsonp

sca clas ext call rip oct utf-8 title initial demo1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

前端問題各種解決方式及原理

create jsonp json 註意 require font name 報錯 lencod 跨域的各種解決方式及原理 因為瀏覽器有某些安全級別的限制,例如,同源策略,所以在進行瀏覽器端的web應用開發的時候,經常會遇到跨域問題。 同源策略:只有在同源的情況下(同域

前端 -

dom 請求 block 瀏覽器中 同源策略 lock 查詢 之間 什麽 什麽是跨域? 跨域是指瀏覽器中不同域之間的通信,主要是因為瀏覽器的同源策略,它規定了不同源之間的通信方式。 針對點 接口請求 DOM查詢 前端 - 跨域

前端解決

跨域 端口 xhr 協議 同源策略 source 場景 ram 服務器 瀏覽器的同源策略會導致跨域,這裏同源策略又分為以下兩種: DOM同源策略:禁止對不同源頁面DOM進行操作。這裏主要場景是iframe跨域的情況,不同域名的iframe是限制互相訪問的。 XmlHttpR

node+express解決前端問題

var express = require('express') , app = express(); //解決跨域 app.all('*',function (req, res, next) { res.header('Access-Control-Allow-Origin', '

常用前端頁面一些知識總結

1、margin 和padding 2、ID值中間不允許有任何分隔符(id= “/appt-web/departmentSpecialClinics/listNew.html”無效ID) 3、Js如何獲取兩個特定符號之間的值 比如var chars=" [email prote

vue——前端

***針對的是不同域名、不同協議的跨域: 1、找到config檔案中開發環境的配置檔案——dev.env.js,在裡面將要跨域的域名配置進去   2、找到config檔案中線上環境的配置檔案——prod.env.js,在裡面將要跨域的域名配置進    3、配置完

【nginx學習】nginx反向代理前端問題

本地ip name str host jsonp 註意 access origin 跨域問題 * 跨域簡介: 跨域是指a頁面想獲取b頁面資源,如果a、b頁面的協議、域名、端口、子域名不同,所進行的訪問行動都是跨域的,而瀏覽器為了安全問題一般都限制了跨域訪問,也就是不允許跨域

SpringBoot---前端

1.解決方案一:在Controller上新增@CrossOrigin註解 // 註解方式 @CrossOrigin @RestController public class LoginController { //方法上加入註解 @CrossOrig

前端通訊的幾種方式

一、JSONP 我們都知道script標籤src屬性中的連結卻可以訪問跨域的js指令碼,利用這個特性,服務端不再返回JSON格式的資料,而是返回一段呼叫某個函式的js程式碼,在src中進行了呼叫函式來獲取到資料,函式中的引數就是我們需要的資料,這樣實現了跨域。 基本思想是: 1、客戶端利