jquery學習筆記——getJSON無法讀取本地json資料的問題

jquery學習筆記——getJSON無法讀取本地json資料的問題

今天在改網頁的時候,需要調取本地json檔案進行測試

一開始用的是<script type=’text/javascript’ src=’test.json’></script>

在呼叫的時候沒有任何問題。

當然,這種做法說白了就是把所有的json檔案中的資料都載入到記憶體中

但在資料量龐大的情況下,這種方法顯然是不可取的

所以想到了用jquery的getjson非同步載入

    <script>
$(function(){
$.getJSON("test.json", function(data){
alert('abc');
});
});
</script>

然而,在呼叫本地測試檔案時,卻始終無法成功

一開始以為是json檔案格式或者編碼的問題,檢查了n次之後都沒找出問題的原因

(最麻煩的是百度搜尋相關問題也沒有絲毫頭緒)

後來在瀏覽器控制檯中找到了問題的原因

(以搜狗瀏覽器為例:F12-Console)

XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/test.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, se-extension, https.

跨域請求僅支援在http/data/chrome/se-extension/https協議下使用

什麼叫跨域?
字面理解,跨是跨越,域是別的伺服器,跨域就是到別的伺服器上取東西。
報錯的意思應該就是chrome下,跨域請求只能通過通過這些協議標準實現:http、data、https、chrom-extension、chrom-extension-resource。
只要協議、域名、或埠有任何一個不同,就會被當做是不同的域。
但是仔細再一想,我請求的是本地檔案啊,沒有通過伺服器請求啊,應該不算跨域麼?什麼鬼
再查發現,chrome在讀取本地相對路徑指令碼時,禁止向第三方請求資料。 (只要是通過file://方式訪問,或者直接拖進瀏覽器訪問,都叫本地執行) 
什麼叫第三方?那就是不管本地檔案、還是伺服器url 檔案都不行。

提示這個原因是:瀏覽器為了安全性考慮,預設對跨域訪問禁止。

知道了原因,接下來是解決方式:

解決一: 
在sublime裡面 啟動sublimeServer,開啟伺服器模式,在瀏覽器中通過localhost:8080/index.html訪問,再看 debug tool,沒有報錯了,完美!~成功訪問到本地json檔案。
好奇助我成長,順手拖進火狐測了一下,並沒有報錯 
FireFox : 允許讀取本地相對路徑指令碼。

這是萬能的(就是麻煩……)

解決二: 
查資料,發現還有一種解決方法,不用啟動伺服器模式,直接更改chrome的設定就行。 
在chrome屬性設定中,新增啟動引數: 
--allow-file-access-from-files : 允許本地Ajax請求,也叫file協議下的Ajax請求 
--enable-file-cookies : 允許chrome儲存本地設定cookie
設定方法:chrome快捷方式–右鍵“屬性”–快捷方式–目標 

即右鍵chrome的快捷方式(只有快捷方式才能額外新增命令)屬性-快捷方式-目標

將目標改為C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe –allow-file-access-from-files –enable-file-cookies。

使用時開啟chrome瀏覽器,再把html檔案丟進去就可以生效了。(直接開啟html檔案依然無效)

ps:如果不改快捷方式,則在cmd命令中執行時加上後面這一段(或者建個bat檔案來搞也是可以的)

pps:經測試,方法二對搜狗瀏覽器和世界之窗瀏覽器無效(估計也沒人用這玩意兒開發……)

引用資料:https://blog.csdn.net/u012786716/article/details/56481768