AJAX的跨域問題解決方案
目錄
- 跨域的概述
- 區(qū)別同源與不同源
- 同源策略有什么用?
- AJAX跨域解決方案
- 方案一、設(shè)置響應(yīng)頭
- 方案二、jsonp
- 方案三、代理機(jī)制(httpclient)
- 總結(jié)
跨域的概述
- 跨域是指從一個(gè)域名的網(wǎng)頁去請(qǐng)求另一個(gè)域名的資源。比如從百度(https://baidu.com)頁面去請(qǐng)求京東(https://www.jd.com)的資源。
- 通過超鏈接、form表單提交、window.location.href、document.location.href、script標(biāo)簽、img標(biāo)簽等方式進(jìn)行跨域是不存在問題的。但在一個(gè)域名的網(wǎng)頁中的一段js代碼發(fā)送AJAX請(qǐng)求去訪問另一個(gè)域名中的資源,由于同源策略的存在導(dǎo)致無法跨域訪問,AJAX就存在這種跨域問題。
- 同源策略是指一段腳本只能讀取來自同一來源的窗口和文檔的屬性,同源就是協(xié)議、域名和端口都相同。
下面是使用AJAX發(fā)送請(qǐng)求跨域訪問資源出現(xiàn)的問題:請(qǐng)求的資源上不存在“訪問控制允許源”標(biāo)頭:(就是被同源策略阻止了)
區(qū)別同源與不同源
區(qū)分同源和不同源的三要素:
協(xié)議域名端口
協(xié)議一致,域名一致,端口號(hào)一致,三要素都要一致,才是同源,其它一律都是不同源。
同源策略有什么用?
如果你剛剛在網(wǎng)銀輸入賬號(hào)密碼,查看了自己還有一萬 元塊錢,緊接著訪問一些不規(guī)矩的網(wǎng)站,這個(gè)網(wǎng)站可以訪問剛剛的網(wǎng)銀站點(diǎn),并且獲取賬號(hào)密碼,那后果可想而知。所以,從安全的角度來講,同源策略是有利于保護(hù)網(wǎng)站信息的。
AJAX跨域解決方案
有一些情況下,我們是需要使用AJAX進(jìn)行跨域訪問的。比如某公司的A頁面(
a.aresourse.com
)有可能需要獲取B頁面(b.bresourse.com
)。
方案一、設(shè)置響應(yīng)頭
核心原理:跨域訪問的資源允許你跨域訪問。(被調(diào)用方允許你可跨域訪問)
實(shí)現(xiàn):
response.setHeader("Access-Control-Allow-Origin","http://localhost:8080/ajax/ajax7.html");//允許某個(gè)response.setHeader("Access-Control-Allow-Origin","*");//允許所有
方案二、jsonp
jsonp:json with padding
jsonp
不是一個(gè)真正的AJAX
請(qǐng)求。只不過可以完成AJAX
的局部刷新效果。可以說jsonp
是一種類AJAX
請(qǐng)求的機(jī)制。
jsonp
可以解決跨域問題。
注意:jsonp
解決跨域的時(shí)候,只支持GET
請(qǐng)求。不支持post
請(qǐng)求。這是因?yàn)?code>jsonp本就是動(dòng)態(tài)的創(chuàng)建script
標(biāo)簽從而達(dá)到跨域的效果。
下面是動(dòng)態(tài)創(chuàng)建的代碼:
效果展示:
jQuery
封裝了jsonp
,也就是說可以使用jQuery
庫去進(jìn)行編寫jsonp
代碼,方便。
核心代碼如下:
$.ajax({ type:"GET", url:"跨域的url", dataType:"jsonp", //指定數(shù)據(jù)類型 jsonp:"fun", //指定參數(shù)名(不設(shè)置的時(shí)候,默認(rèn)是”callback“) jsonpCallback:"sayHello" //指定回調(diào)函數(shù)的名字,不設(shè)置的時(shí)候,jQuery會(huì)自動(dòng)生成一個(gè)隨機(jī)的回調(diào)函數(shù), //并且這個(gè)回調(diào)函數(shù)還會(huì)自動(dòng)調(diào)用success的回調(diào)函數(shù)})
方案三、代理機(jī)制(httpclient)
“調(diào)用方”解決跨域的問題是這個(gè)思路的:讓發(fā)送出去的請(qǐng)求代理成是本域的。
如果資源是本域的,那就側(cè)面地進(jìn)行了跨域。
使用Java程序怎么去發(fā)送get/post
請(qǐng)求呢?【GET和POST請(qǐng)求就是HTTP請(qǐng)求】
- 使用
JDK
內(nèi)置的API
(java.net.URL....
),這些API
是可以發(fā)送HTTP
請(qǐng)求的。 - 使用第三方的開源組件,比如:
apache
的httpclient
組件。(httpclient
組件是開源免費(fèi)的,可以直接用)。
總結(jié)
到此這篇關(guān)于AJAX的跨域問題解決的文章就介紹到這了,更多相關(guān)AJAX跨域問題內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!
