成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端解決跨域

goji / 2546人閱讀

摘要：所有支持的瀏覽器都會(huì)使用同源策略這個(gè)安全策略，所謂同源是指，域名，協(xié)議，端口相同，就是因?yàn)橥床呗缘挠绊憣?dǎo)致沒(méi)法直接用請(qǐng)求不同域上的數(shù)據(jù)，所以各種解決問(wèn)題的技術(shù)出現(xiàn)了。

在日常的項(xiàng)目開發(fā)時(shí)會(huì)不可避免的需要進(jìn)行跨域操作，面試中也是頻繁被經(jīng)常會(huì)問(wèn)到的問(wèn)題，本文只是我經(jīng)常用到的解決跨域的方式做個(gè)記錄與總結(jié)。

所有支持Javascript的 瀏覽器 都會(huì)使用‘同源策略’這個(gè)安全策略，所謂同源是指，域名，協(xié)議，端口相同，就是因?yàn)橥床呗缘挠绊憣?dǎo)致沒(méi)法直接用XMLHttpRequest請(qǐng)求不同域上的數(shù)據(jù)，所以各種解決問(wèn)題的技術(shù)出現(xiàn)了。

Jsonp

通過(guò)dataType指定jsonp,jquery底層封裝后，會(huì)在head標(biāo)簽后面追加

所有的jsonP都是這個(gè)原理，借助script標(biāo)簽的跨域特性來(lái)實(shí)現(xiàn)，callbackFun再jquery中是自動(dòng)生成的，后臺(tái)會(huì)獲取jsoncallback參數(shù)，獲取對(duì)應(yīng)的函數(shù)名稱，最后包裝成想要的格式，比如最后輸出結(jié)果是：callbackFun({"result":"suc","code":"1000"})，那么再Jquery中，會(huì)將該方法直接指定給success方法，最后來(lái)接收返回的數(shù)據(jù)。

JSONP的優(yōu)點(diǎn)是：它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。
JSONP的缺點(diǎn)則是：它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題。

cors

CROS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問(wèn)跨域資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。CROS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功還是失敗。CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
前端實(shí)現(xiàn)方式和一般的ajax請(qǐng)求是一樣的，只是方式的接口是絕對(duì)地址。服務(wù)器端對(duì)于CORS的支持，主要就是通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置，就可以允許Ajax進(jìn)行跨域的訪問(wèn)。

JSONP只支持GET請(qǐng)求，CORS支持所有類型的HTTP請(qǐng)求。JSONP的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)。

服務(wù)器代理

禁止跨域問(wèn)題其實(shí)是瀏覽器的一種安全行為，假如我們的目標(biāo)服務(wù)器不能設(shè)置header,而且我們需要發(fā)送post請(qǐng)求，上面的解決方案就被否定了，但是服務(wù)器與服務(wù)器之間的請(qǐng)求是不存在跨域的。

強(qiáng)大的nginx，偉大的nodeJS都可以實(shí)現(xiàn)一個(gè)代理服務(wù)器功能。

反向代理服務(wù)器，就是把http請(qǐng)求轉(zhuǎn)發(fā)到另一個(gè)或者一些服務(wù)器上。通過(guò)把本地一個(gè)url前綴映射到要跨域訪問(wèn)的web服務(wù)器上，就可以實(shí)現(xiàn)跨域訪問(wèn)。對(duì)于瀏覽器來(lái)說(shuō)，訪問(wèn)的就是同源服務(wù)器上的一個(gè)url。而nginx通過(guò)檢測(cè)url前綴，把http請(qǐng)求轉(zhuǎn)發(fā)到后面真實(shí)的物理服務(wù)器。并通過(guò)rewrite命令把前綴再去掉。這樣真實(shí)的服務(wù)器就可以正確處理請(qǐng)求，并且并不知道這個(gè)請(qǐng)求是來(lái)自代理服務(wù)器的。

nginx的配置方法網(wǎng)上已經(jīng)泛濫了，保存幾個(gè)參考過(guò)的網(wǎng)址。
http://www.imooc.com/article/...
http://www.cnblogs.com/renjin...
http://www.cnblogs.com/bninp/...

nodeJs 主要是使用的node-http-proxy實(shí)現(xiàn)的，相關(guān)信息也很多。
https://github.com/nodejitsu/...
http://www.cnblogs.com/woodk/...
http://blog.csdn.net/jaye100/...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88335.html

相關(guān)文章

  • ajax跨域，這應(yīng)該是最全的解決方案了

    摘要：關(guān)于，強(qiáng)烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個(gè)實(shí)現(xiàn)原理圖簡(jiǎn)化版如何判斷是否是簡(jiǎn)單請(qǐng)求瀏覽器將請(qǐng)求分成兩類簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。 前言 從剛接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過(guò)N個(gè)跨域相關(guān)的問(wèn)題了，16年時(shí)也整理過(guò)一篇相關(guān)文章，但是感覺(jué)還是差了點(diǎn)什么，于是現(xiàn)在重新梳理了一下。 個(gè)人見(jiàn)識(shí)有限，如有差錯(cuò)，請(qǐng)多多見(jiàn)諒，歡迎提出iss...

    ytwman 評(píng)論0 收藏0

  • 20K前端大佬面試(關(guān)于如何回答ajax跨域問(wèn)題)

    摘要：在接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問(wèn)題，這里我把它總結(jié)記錄一下。 在接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問(wèn)題，這里我把它總結(jié)記錄一下。關(guān)于跨域，有N種類型，現(xiàn)在我只專注于ajax請(qǐng)求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內(nèi)容...

    Yangyang 評(píng)論0 收藏0

  • 前端跨域方法論

    摘要：說(shuō)明是否允許通訊同一域名允許同一域名下的不同文件夾允許不同端口號(hào)不允許不同協(xié)議不允許不同域名不允許主域相同，子域不同不允許跨域解決方案由于瀏覽器同源策略是允許標(biāo)簽這樣的跨域資源嵌套的，所以標(biāo)簽的資源不受同源策略的限制。 前言 本著學(xué)習(xí)和總結(jié)的態(tài)度寫的技術(shù)輸出，文中有任何錯(cuò)誤和問(wèn)題，請(qǐng)大家指出。更多的技術(shù)輸出可以查看我的 github博客。 整理了一些前端的學(xué)習(xí)資源，希望能夠幫助到有需要...

    leejan97 評(píng)論0 收藏0

  • 前端常見(jiàn)跨域解決方案（全）

    摘要：需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。目前，所有瀏覽器都支持該功能需要使用對(duì)象來(lái)支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...

    canger 評(píng)論0 收藏0

  • 徹底弄懂跨域問(wèn)題

    摘要：用于告知瀏覽器可以將預(yù)先檢查請(qǐng)求返回結(jié)果緩存的時(shí)間，在緩存有效期內(nèi)，瀏覽器會(huì)使用緩存的預(yù)先檢查結(jié)果判斷是否發(fā)送跨域請(qǐng)求。 跨域，老生常談的問(wèn)題 簡(jiǎn)述 作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來(lái)越近，就算是菜鳥也要猛振翅膀。近幾日仔細(xì)研究了跨域問(wèn)題，寫下這篇文章，希望對(duì)開發(fā)者們有所幫助。在讀本文前，希望您對(duì)以下知識(shí)略有了解。 瀏覽器同源策略 n...

    rose 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<