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