有乙個理論,叫專家盲點,你問乙個氣象家,什麼是風,他會一臉正經,一字一句的說:『風是由空氣流動引起的一種自然現象,它是由太陽輻射熱引起的。。。』然後你就。。。如果回答的是:『你感受一下,這就是風』,你是不是會瞬間明白呢。如果你想檢驗你是否學懂了乙個知識點,你可以這樣檢驗,試著向乙個小白解釋這個知識點,,看看他能不能聽懂。我就是想檢驗一下偶自己,,也許沒人看,但,根本目的不是為了讓別人看到,因為知識有輸出,你就會有輸入。。
比如:你自己做了乙個web應用,功能是展示各地天氣情況,好了,你的頁面都已經寫好了,但我改如何獲取各地的天氣情況呢,這就需要你通過請求去獲取,比如你的天氣資料**是中國天氣網,那麼你就需要向該**的天氣api傳送請求獲取天氣資料。但是,,人家的資料你是訪問不到的,因為瀏覽器不會允許你的**從第三方**獲取資料,這是因為瀏覽器的同源政策,所謂同源,指兩個**的協議,網域名稱,埠號都相同,這樣兩個**直接才能相互通訊。同源政策是網景公司引入瀏覽器的,現在瀏覽器都支援,目的是為了保證使用者資訊保安。
但是,安全是安全了,但我們的功能該如何實現呢?即如何向第三方發起請求,二者進行通訊呢?這就是所謂的跨域。
**jsonp原理: ** 利用script標籤沒有跨域限制的特性,讓它指向第三方**,即用script標籤發出請求,但它請求的資源會被當成js去執行,那如何讓這個返回的資料能夠被我所用,能夠被得到執行呢?這就需要第三方**給你的資料是乙個資料json包,它返回的資料,不是簡單的資料,而是用乙個**函式包裝起來的,作為函式引數返回給你自己已經定義好的函式,這個函式的功能就是你對資料的操作處理。這樣就可以請求到底三方的資源了,,但前提是需要第三方給你提供這個請求接**才能夠請求到資料。
前端**
換一組
後端資料mock
var news = [
"第11日前瞻:中國衝擊4金 博爾特再戰200公尺羽球",
"正直播柴飈/洪煒出戰 男雙力爭會師決賽",
"女排將死磕巴西!郎平安排男陪練模仿對方核心",
"沒有中國選手和巨星的110公尺欄 我們還看嗎?",
"中英上演奧運金牌大戰",
"博彩賠率挺中國奪回第二紐約時報:中國因對手服禁藥而丟失的獎牌最多",
"最「出櫃」奧運?同性之愛閃耀裡約",
"下跪拜謝與洪荒之力一樣 都是真情流露"
]var data = ;
for (var i = 0; i < 3; i++)
var cb = req.query.callback; //獲取請求引數
if (cb) else
})前端**
換一組
後端資料mock
var news = [
"第11日前瞻:中國衝擊4金 博爾特再戰200公尺羽球",
"正直播柴飈/洪煒出戰 男雙力爭會師決賽",
"女排將死磕巴西!郎平安排男陪練模仿對方核心",
"沒有中國選手和巨星的110公尺欄 我們還看嗎?",
"中英上演奧運金牌大戰",
"博彩賠率挺中國奪回第二紐約時報:中國因對手服禁藥而丟失的獎牌最多",
"最「出櫃」奧運?同性之愛閃耀裡約",
"下跪拜謝與洪荒之力一樣 都是真情流露"
]var data = ;
for (var i = 0; i < 3; i++)
res.header("access-control-allow-origin", ""); //服務端在響應投加上允許跨域請求的**即可,只有它允許的才可以訪問到
"access-control-allow-origin", "*"); *表示接收所有跨域請求
res.send(data);
})
子視窗**
子視窗
前後端**都需要在靜態伺服器上執行,我用的是nojs下的srver-mock工具。 js跨域 ajax跨域 跨域方式(前端)
跨域方式 cors 跨域資源共享 當使用xmlhttprequest傳送請求時,瀏覽器會自動加上乙個請求頭 origin,後端在接受到請求後確定響應後會在response headers中加入乙個屬性 access control allow origin,值就是發起請求的源位址 瀏覽器得到響應會進...
跨域的方法小結
當協議 子網域名稱 主網域名稱 埠號中任意乙個不相同時,都算作不同域。不同域之間相互請求資源,就算作 跨域 方法1.通過php設定響應頭允許跨域 cors方式 cors 跨域資源共享,cross origin resource sharing 定義一種跨域訪問的機制,可以讓ajax實現跨域訪問。co...
js跨域問題
什麼是跨域?概念 只要協議 網域名稱 埠有任何乙個不同,都被當作是不同的域。1.document.domain 跨子域 這個是範圍最小的乙個。比如a.example.com 中寫了乙個iframe,其中src example.com 但是因為是不同域的就無法寫js獲取iframe中的document...