5种处理js跨域问题方法汇总(转载)
1.JSONP跨域GET請(qǐng)求
???ajax請(qǐng)求,dataType為jsonp。這種形式需要請(qǐng)求在服務(wù)端調(diào)整為返回callback([json-object])的形式。如果服務(wù)端返回的是普通json對(duì)象。那么調(diào)試的時(shí)候,在chrome瀏覽器的控制臺(tái)會(huì)報(bào)"Uncaught?SyntaxError:?Unexpected?token"錯(cuò)誤;在firefox瀏覽器的控制臺(tái)會(huì)報(bào)"SyntaxError:?missing?;?before?statement"錯(cuò)誤。
JSON是一種輕量級(jí)的數(shù)據(jù)交換格式,像xml一樣,是用來(lái)描述數(shù)據(jù)間的。
JSONP是一種使用JSON數(shù)據(jù)的方式,返回的不是JSON對(duì)象,是包含JSON對(duì)象的javaScript腳本。
由于同源策略的限制,XmlHttpRequest只允許請(qǐng)求當(dāng)前源(域名、協(xié)議、端口)的資源。若要跨域請(qǐng)求出于安全性考慮是不行的,但是我們發(fā)現(xiàn),Web頁(yè)面上調(diào)用js文件時(shí)則不受是否跨域的影響,而且擁有”src”這個(gè)屬性的標(biāo)簽都擁有跨域的能力,比如<script>、<img>、<iframe>,這時(shí)候,聰明的程序猿就想到了變通的方法,如果要進(jìn)行跨域請(qǐng)求,?通過(guò)使用html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求,并在響應(yīng)中返回要執(zhí)行的script代碼,其中可以直接使用JSON傳遞?javascript對(duì)象。即在跨域的服務(wù)端生成JSON數(shù)據(jù),然后包裝成script腳本回傳,著不就突破同源策略的限制,解決了跨域訪問(wèn)的問(wèn)題了么。
2.iframe跨域。
???頁(yè)面中增加一個(gè)iframe元素,在需要調(diào)用get請(qǐng)求的時(shí)候,將iframe的src設(shè)置為get請(qǐng)求的url即可發(fā)起get請(qǐng)求的調(diào)用。
var?url?=?"http://xxx.xxx.xxx?p1=1&p2=2";
$("#iframe").attr("src",?url);//跨域,使用iframe
iframe方式強(qiáng)于jsonp,除了可以處理http請(qǐng)求,還能夠跨域?qū)崿F(xiàn)js調(diào)用。
3.script元素的src屬性處理
???iframe、img、style、script等元素的src屬性可以直接向不同域請(qǐng)求資源,jsonp正是利用script標(biāo)簽跨域請(qǐng)求資源的簡(jiǎn)單實(shí)現(xiàn),所以這個(gè)和jsonp本質(zhì)一樣,同樣需要服務(wù)端請(qǐng)求返回callback...形式。
var?url="http://xxx.xxx.xxx?p1=1";
var?script?=?document.createElement('script');
script.setAttribute('src',?url);
document.getElementsByTagName('head')[0].appendChild(script);
4.在服務(wù)器使用get處理。
???對(duì)于業(yè)務(wù)上沒有硬性要求在前端處理的,可以在服務(wù)端做一次封裝,再服務(wù)端發(fā)起調(diào)用,這樣就可以解決跨域的問(wèn)題。然后再根據(jù)請(qǐng)求是發(fā)出就完,還是需要獲取返回值,來(lái)決定代碼使用同步或者異步模式。
?private?static?void?CreateGetHttpResponse(string?url,?int??timeout,?string?userAgent,?CookieCollection?cookies)
????????{
????????????if?(string.IsNullOrEmpty(url))
????????????{
????????????????throw?new?ArgumentNullException("url");
????????????}
????????????var?request?=?WebRequest.Create(url)?as?HttpWebRequest;
????????????request.Method?=?"GET";
????????????if?(!string.IsNullOrEmpty(userAgent))
????????????{
????????????????request.UserAgent?=?userAgent;
????????????}
????????????if?(timeout.HasValue)
????????????{
????????????????request.Timeout?=?timeout.Value;
????????????}
????????????if?(cookies?!=?null)
????????????{
????????????????request.CookieContainer?=?new?CookieContainer();
????????????????request.CookieContainer.Add(cookies);
????????????}
????????????request.BeginGetResponse(null,null);//異步
????????????//return?request.GetResponse()?as?HttpWebResponse;
????????}
5.flash跨域
過(guò)于尖端了==,再研究
總結(jié):以上5種方法就是常見的解決js跨域問(wèn)題的處理方法了,最后一種比較高端,等我研究清楚了再補(bǔ)上吧。
<script>
<img>
<iframe?src>
?
?
你的關(guān)注和支持是對(duì)我最大的動(dòng)力~
書山有路群[一個(gè)非常活躍的讀書分享群,每周都有新書分享]:452450927
微博:http://weibo.com/u/2241641312
出處:http://www.cnblogs.com/wdlhao/
github:https://github.com/wdlhao
本文版權(quán)歸作者和博客園共有,歡迎轉(zhuǎn)載,但未經(jīng)作者同意必須保留此段聲明。
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/zhangym118/p/5999294.html
總結(jié)
以上是生活随笔為你收集整理的5种处理js跨域问题方法汇总(转载)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: centos7下安装mariadb
- 下一篇: 跨界创立PayPal、特斯拉、Space