資訊專欄INFORMATION COLUMN
摘要：所有支持的瀏覽器都會使用同源策略這個安全策略，所謂同源是指，域名，協(xié)議，端口相同，就是因?yàn)橥床呗缘挠绊憣?dǎo)致沒法直接用請求不同域上的數(shù)據(jù)，所以各種解決問題的技術(shù)出現(xiàn)了。
在日常的項(xiàng)目開發(fā)時會不可避免的需要進(jìn)行跨域操作，面試中也是頻繁被經(jīng)常會問到的問題，本文只是我經(jīng)常用到的解決跨域的方式做個記錄與總結(jié)。
所有支持Javascript的 瀏覽器 都會使用‘同源策略’這個安全策略，所謂同源是指，域名，協(xié)議，端口相同，就是因?yàn)橥床呗缘挠绊憣?dǎo)致沒法直接用XMLHttpRequest請求不同域上的數(shù)據(jù)，所以各種解決問題的技術(shù)出現(xiàn)了。
Jsonp
通過dataType指定jsonp,jquery底層封裝后，會在head標(biāo)簽后面追加
所有的jsonP都是這個原理，借助script標(biāo)簽的跨域特性來實(shí)現(xiàn)，callbackFun再jquery中是自動生成的，后臺會獲取jsoncallback參數(shù)，獲取對應(yīng)的函數(shù)名稱，最后包裝成想要的格式，比如最后輸出結(jié)果是：callbackFun({"result":"suc","code":"1000"})，那么再Jquery中，會將該方法直接指定給success方法，最后來接收返回的數(shù)據(jù)。
JSONP的優(yōu)點(diǎn)是：它不像XMLHttpRequest對象實(shí)現(xiàn)的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果。
JSONP的缺點(diǎn)則是：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進(jìn)行JavaScript調(diào)用的問題。
CROS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務(wù)器應(yīng)該如何溝通。CROS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請求或響應(yīng)是應(yīng)該成功還是失敗。CORS需要瀏覽器和服務(wù)器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
前端實(shí)現(xiàn)方式和一般的ajax請求是一樣的，只是方式的接口是絕對地址。服務(wù)器端對于CORS的支持，主要就是通過設(shè)置Access-Control-Allow-Origin來進(jìn)行的。如果瀏覽器檢測到相應(yīng)的設(shè)置，就可以允許Ajax進(jìn)行跨域的訪問。
JSONP只支持GET請求，CORS支持所有類型的HTTP請求。JSONP的優(yōu)勢在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請求數(shù)據(jù)。
服務(wù)器代理禁止跨域問題其實(shí)是瀏覽器的一種安全行為，假如我們的目標(biāo)服務(wù)器不能設(shè)置header,而且我們需要發(fā)送post請求，上面的解決方案就被否定了，但是服務(wù)器與服務(wù)器之間的請求是不存在跨域的。
強(qiáng)大的nginx，偉大的nodeJS都可以實(shí)現(xiàn)一個代理服務(wù)器功能。
反向代理服務(wù)器，就是把http請求轉(zhuǎn)發(fā)到另一個或者一些服務(wù)器上。通過把本地一個url前綴映射到要跨域訪問的web服務(wù)器上，就可以實(shí)現(xiàn)跨域訪問。對于瀏覽器來說，訪問的就是同源服務(wù)器上的一個url。而nginx通過檢測url前綴，把http請求轉(zhuǎn)發(fā)到后面真實(shí)的物理服務(wù)器。并通過rewrite命令把前綴再去掉。這樣真實(shí)的服務(wù)器就可以正確處理請求，并且并不知道這個請求是來自代理服務(wù)器的。
nginx的配置方法網(wǎng)上已經(jīng)泛濫了，保存幾個參考過的網(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88335.html
摘要：關(guān)于，強(qiáng)烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實(shí)現(xiàn)原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。 前言 從剛接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過N個跨域相關(guān)的問題了，16年時也整理過一篇相關(guān)文章，但是感覺還是差了點(diǎn)什么，于是現(xiàn)在重新梳理了一下。 個人見識有限，如有差錯，請多多見諒，歡迎提出iss...
摘要：在接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問題，這里我把它總結(jié)記錄一下。 在接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問題，這里我把它總結(jié)記錄一下。關(guān)于跨域，有N種類型，現(xiàn)在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內(nèi)容...
摘要：需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當(dāng)前頁。目前，所有瀏覽器都支持該功能需要使用對象來支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...
閱讀 1538·2021-11-24 09:39
閱讀 1843·2021-11-22 15:25
閱讀 3811·2021-11-19 09:40
閱讀 3356·2021-09-22 15:31
閱讀 1367·2021-07-29 13:49
閱讀 1304·2019-08-26 11:59
閱讀 1374·2019-08-26 11:39
閱讀 984·2019-08-26 11:00
