簡單談?wù)刯son跨域
這一篇文章呢,主要是之前一直聽別人講json跨域跨域,但是還是一頭霧水,只知其一,于是一怒之下,翻閱各種資料,如果有不正確的地方,勞煩指正一下^_^
首先,先了解瀏覽器有一個很重要安全性限制,即為同源策略:不同域的客戶端腳本在無明確授權(quán)的情況下不能讀些對方資源??缬蛞簿褪遣煌磣
簡單的說,只要協(xié)議,端口,域名有一個不同,即為跨域!
然而,當(dāng)進行一些比較深入的前端編程的時候,不可避免地需要進行跨域操作,這時候“同源策略”就顯得過于苛刻。
解決方法:
1.使用jsonp解決跨域 :(僅適用于GET請求)
實現(xiàn)原理:<script> 標(biāo)簽是不受同源策略的限制的,它可以載入任意地方的 JavaScript 文件,而并不要求同源。
所以 JSONP 的理念就是,我和服務(wù)端約定好一個函數(shù)名,當(dāng)我請求文件的時候,服務(wù)端返回一段 JavaScript。這段 JavaScript 調(diào)用了我們約定好的函數(shù),并且將數(shù)據(jù)當(dāng)做參數(shù)傳入。非常巧合的一點(其實并不是),JSON 的數(shù)據(jù)格式和 JavaScript 語言里對象的格式正好相同。所以在我們約定的函數(shù)里面可以直接使用這個對象。
使用JavaScript代碼解決
var eleScript = document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = "http://example2.com/getinfo.php"; document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
使用jquery解決
$.ajax({ url: http://跨域的dns/document!searchJSONResult.action, type: "GET", dataType: 'jsonp', //主要是這里和原來的json改變了! jsonp: 'jsoncallback', })
2.使用HTML5的window.postMessage方法來跨域傳送數(shù)據(jù) (只兼容IE8+、FireFox、Chrome、Opera等瀏覽器)
window.postMessage(message,targetOrigin) 方法是html5新引進的特性,可以使用它來向其它的window對象發(fā)送消息,無論這個window對象是屬于同源或不同源。
------------暫且先介紹這2種解決方法……其實還有很多其他的,之后再一一補充-----------------
- getJSON跨域SyntaxError問題分析
- JS不能跨域借助jquery獲取IP地址的方法
- js跨域問題淺析及解決方法優(yōu)缺點對比
- 使用jsonp完美解決跨域問題
- 5種處理js跨域問題方法匯總
- AngularJS iframe跨域打開內(nèi)容時報錯誤的解決辦法
- js跨域請求的5中解決方式
- Jsonp post 跨域方案
- javascript跨域方法、原理以及出現(xiàn)問題解決方法(詳解)
- js實現(xiàn)跨域的幾種方法匯總(圖片ping、JSONP和CORS)
- AJAX實現(xiàn)跨域的三種方法(代理,JSONP,XHR2)
- JS跨域交互(jQuery+php)之jsonp使用心得
相關(guān)文章
uniapp發(fā)送formdata表單請求2種方法(全網(wǎng)最簡單方法)
這篇文章主要給大家介紹了關(guān)于uniapp發(fā)送formdata表單請求2種方法的相關(guān)資料,本文介紹的方法應(yīng)該是全網(wǎng)最簡單方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09uniapp?手機驗證碼輸入框?qū)崿F(xiàn)代碼(隨機數(shù)、倒計時、隱藏手機號碼中間四位)可以直接使用
這篇文章主要介紹了uniapp?手機驗證碼輸入框(隨機數(shù)、倒計時、隱藏手機號碼中間四位),實現(xiàn)思路通過創(chuàng)建六個正方形的view,然后創(chuàng)建一個數(shù)字input,最大輸入長度為六位(根據(jù)驗證碼的長度),再將input隱藏掉,獲取到的值分別放到六個view中,需要的朋友可以參考下2023-02-02js以分隔符分隔數(shù)組中的元素并轉(zhuǎn)換為字符串的方法
下面小編就為大家?guī)硪黄猨s以分隔符分隔數(shù)組中的元素并轉(zhuǎn)換為字符串的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11JavaScript監(jiān)聽鍵盤事件代碼實現(xiàn)
這篇文章主要介紹了JavaScript監(jiān)聽鍵盤事件代碼實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06JavaScript 實現(xiàn)拖拽效果組件功能(兼容移動端)
這篇文章主要介紹了JavaScript 實現(xiàn)拖拽效果組件功能(兼容移動端),本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11bootstrap datetimepicker日期插件使用方法
這篇文章主要為大家詳細介紹了bootstrap datetimepicker的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01