前端請求跨域理解
阿新 • • 發佈:2019-01-06
前端跨域請求發生條件:協議,主機,埠,當有一個條件滿足時就會發生跨域問題。
情況1:當我們將網頁以本地檔案的形式開啟的時候,位址列
files:f:/……
原因:預設是以檔案協議開啟的,當然不允許呼叫本地檔案,即使也是同源,因為檔案協議中不存在呼叫別的檔案這一說法。
情況2:我們通過http協議訪問的方式開啟網頁,因為是本地檔案,兩者同源,所以能直接請求到本地檔案。
情況3:當我們想要訪問別的伺服器上的檔案,那麼跨域請求問題就出現了,不在同一個主機上。但是開啟瀏覽器控制檯,我們會發現,依然響應成功200,但是卻進入ajax的error情況,本質上就是瀏覽器禁止跨域載入檔案,但是我們的xmlHttp請求能發出去。
2.跨域解決辦法
1.jsonp
我們發現載入js檔案的時候並不受瀏覽器跨域限制,所以我們可以讓伺服器返回一個帶有script標籤的檔案,這樣瀏覽器就不會限制了,更慶幸的是在ajax中已經為我們封裝好了jsonp請求。
$.ajax({
type: "get",
async: false,
url: "http://192.168.1.102:8080/mghy/shanpao/training/action/label_image/v2?imageFile=/root/Desktop/shanpaoai/sample_images/classify1.jpg&lastFrame=true" ,
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理程式或頁面的,用以獲得jsonp回撥函式名的引數名(一般預設為:callback)
jsonpCallback:"result",//自定義的jsonp回撥函式名稱,預設為jQuery自動生成的隨機函式名,也可以寫"?",jQuery會自動為你處理資料
success: function (json){
document.getElementById("content").innerHTML=json.msg;
},
error: function(){
alert('fail');
}
});
以上強調:ajax本質上是封裝了xmlhttp請求,來獲取非本頁的東西,而jsonp的本質是要新增script標籤來逃過瀏覽器的限制,只不過jquery封裝在了ajax中,並不能改變他的本質,就如我們也可以在後臺服務端代理請求別的 伺服器。
2.後臺代理
跨域請求檔案時,通過呼叫後臺servelet,來代理我們請求,然後返回給前臺,相當於繞過瀏覽器,自然不存在跨域問題。
3.h5websocket
正在學習