最近在開發(fā)過程中,使用ajax去異步調(diào)取圖片。在開發(fā)中這個功能沒什么問題,可以后來提測,重新部署之后就有問題了,這就是ajax的跨域問題。
ajax核心對象xmlHttPRequest本身是不支持跨域的,這是由于javascript的同源策略所導(dǎo)致。但是我們可以通過其他方法來解決ajax的跨域問題。
2015年3.4日補充:其實解決之道分為兩種,利用jsonp ,或者轉(zhuǎn)化成不跨域的解決方法
1 由于我們是利用了jquery來寫的ajax,我們一開始是準(zhǔn)備 利用jsonp來解決的,客戶端類似下面寫法
$.ajax({type : "get",url : "http://www.xxx.com/ajax.do",dataType : "jsonp",jsonp: "callbackparam",//服務(wù)端用于接收callback調(diào)用的function名的參數(shù)jsonpCallback:"success_jsonpCallback",//callback的function名稱success : function(json){alert(json);alert(json[0].name);},error:function(){alert('fail');}});
服務(wù)器端寫法
public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";String callbackFunName = context.Request["callbackparam"];context.Response.Write(callbackFunName + "([ { name:/"John/"}])");}
這個方法其實蠻簡單的,跟我們之前寫的改動不大。這種利用jsonp的方案需要服務(wù)端客戶端都作出支持才行
2 由于我們這次項目開發(fā)的頁面比較多,改動起來涉及的地方就比較多了。最后是采取的 直接修改nginx配置實現(xiàn)的。
這種方案實質(zhì)上是改成了不跨域的解決方案,類似于這么解決的:
前端跨域請求目標(biāo)a,我們在后端作出改變,后端抓取目標(biāo)a,然后前端直接調(diào)用后端程序,這樣就不跨域了,相當(dāng)于加了一個中間層。
平時對反向代理的理解也就是 緩存、安全、負(fù)載均衡,所以查了下方向代理
反向代理(Reverse Proxy),顧名思義,就是代理的反向功能。我們使用代理,可以訪問一些我們所不能直接訪問到的網(wǎng)絡(luò),或者可以隱藏自己的真實身份。而反向代理,可以在不暴露內(nèi)部服務(wù)器的情況下,讓外部用戶訪問我們內(nèi)部、防火墻后的服務(wù)。
使用反向代理主要有以下好處:
1請求的統(tǒng)一控制,包括設(shè)置權(quán)限、過濾規(guī)則等;
2隱藏內(nèi)部服務(wù)真實地址,暴露在外的只是反向代理服務(wù)器地址;
3實現(xiàn)負(fù)載均衡,內(nèi)部可以采用多臺服務(wù)器來組成服務(wù)器集群,外部還是可以采用一個地址訪問;
4解決Ajax跨域問題。
5作為真實服務(wù)器的緩沖,解決瞬間負(fù)載量大的問題。
項目完成之后,對ajax跨域問題在網(wǎng)上查了查,還知道了通過HTML中可以請求跨域資源的標(biāo)簽引用來達(dá)到跨域的目的,其實jsonp本質(zhì)上就是采用了這種辦法。
HTML中可以請求跨域資源的標(biāo)簽是很多的,
Script無疑是最合適的。在請求每一個腳本資源時,瀏覽器都會去解析并運行腳本文件內(nèi)定義的函數(shù),或需要馬上執(zhí)行的Javascript代碼,我們可以通過服務(wù)器返回一段腳本或JSON對象,在瀏覽器解析執(zhí)行,從而達(dá)到跨域請求的目的。使用script標(biāo)簽來實現(xiàn)跨域請求,只能使用get方法請求服務(wù)器資源。并且傳參的長度也受到地址欄長度的限制。
新聞熱點
疑難解答