使用的瀏覽器:Google Chrome
版本:40.0.2214.115 m
學習jquery的ajax時,設計了一個簡單的測試ajax的網頁,
直接以file的方式透過瀏覽器測試:file:///E:/test07/www/index.html
結果我在Google Chrome上瀏覽測試時卻出現錯誤:
開發工具上顯示的錯誤如下:
XMLHttpRequest cannot load
file:///E:/Android_Project/test_phonegap/test07/www/aa.txt.
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource.
一直以為是網路上提供的跨網域問題,但是無論我如何試,就是失敗,
最後在國外的一篇文章中提到「Chrome因為安全性的緣故,禁止檔案互相存取,
要解決這個問題,請把檔案放到Web Server,或改以其他的瀏覽器即可」。
於是我開啟Firefox來測試,果然一下子就成功了,所以確定是Chrome本身的限制,
於是開始找是否有解決Chrome這種限制的方法,最後終於找到了。
方法就是在Chrome的執行檔後面加上參數 --allow-file-access-from-files
找到桌面上Chrome的捷徑圖示,按右鍵選擇內容,依下面畫面把參數加到最後面,
記得在參數前面要多加一個空白。
完成後,開啟Google Chrome瀏覽器,在網址列上輸入chrome://version/來檢查是否有成功。
確認參數有啟用之後,重新測試程式,這次就順利成功了。
index.html的原始碼
==============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> -->
<title>AJAX 測試01</title>
</head>
<body>
<p id="p1">AJAX 測試</p><br>
<section id="d2">123456</section>
</body>
<!-- <script type="text/javascript" src="cordova.js"></script> -->
<script src="js/jquery-2.1.3.min.js"></script>
<!--<script src="js/jquery.mobile-1.4.4.min.js"></script> -->
<script type="text/javascript">
$.ajax({
url: "aa.txt",
dataType: "text",
success: function(msg){
alert( msg);
},
error: function(){
alert( "錯誤" );
}
});
</script>
</html>
aa.txt的內容
===============================
我是文字檔