1. 程式人生 > >Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension

報錯資訊:jquery.js:5785 XMLHttpRequest cannot load file:///C:/Users/alex/Desktop/testFIleUpload/rotate/jsonp/remote.js?code=CA1998&callback=flightHandler. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

報錯方式:Chrome瀏覽器開啟本地jsp,用ajax方法中用jsonp直接跨域訪問本地的js檔案。

程式碼示例:本地的testjsonp.jsp訪問本地另一個目錄的remote.js,

testjsonp.jsp:

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>測試頁面</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
     jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "rotate/jsonp/remote.js?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//傳遞給請求處理程式或頁面的,用以獲得jsonp回撥函式名的引數名(一般預設為:callback)
             jsonpCallback:"flightHandler",//自定義的jsonp回撥函式名稱,預設為jQuery自動生成的隨機函式名,也可以寫"?",jQuery會自動為你處理資料
             success: function(json){
                 alert('您查詢到航班資訊:票價: ' + json.price + ' 元,餘票: ' + json.tickets + ' 張。');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
 </head>
 <body>

 </body>
</html>
remote.js:
flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

報錯分析:

1.判斷為ajax的跨域訪問問題

2.本地jsp沒有通過伺服器直接ajax中用jsonp訪問本地js,使用file協議

3.原以為能解決跨域問題,但是上面的報錯資訊就已經說明了,ajax跨域只支援這些協議框架:http,https,data,chrome(Chrome瀏覽器),chrome-extension(Chrome擴充套件外掛),chrome-extension-resource(Chrome擴充套件資源),就是沒有file協議!用了jsonp這種跨域json資料互動協議也沒有,人家ajax就只支援那幾個協議,並且jsonp互動協議也非官方正式的。

解決過程:

1.網上搜過說在google桌面圖示右鍵—屬性—快捷方式標籤頁—目標(就是google瀏覽器的安裝路徑)中路徑後面新增" --allow-file-access-from-files",(注意前面有空格)


2.繼續,如果上述步驟不行,找到谷歌瀏覽器chrome.exe安裝路徑複製下來,我的是E:\Google\Application\chrome.exe,再開啟cmd,直接輸入命令

"E:\Google\Application\chrome.exe" --allow-file-access-from-files

上述兩步試過,在回頭實驗,還是報同樣錯誤,換用不同核心的瀏覽器,還是報這個錯,此方法失效。

繼續探索學習,解決方法總結如下:

1.為避免跨域問題要在伺服器環境裡執行含有ajax方法的頁面,而不是本地頁面直接訪問本地檔案的方式,這樣保證了在用post或者get這類http請求,才能避免ajax跨域問題。

2.本地頁面ajax()請求本地頁面,須通過伺服器環境執行,類似這樣:
http://127.0.0.1:8888/websrc/html_ajax/testjsonp.jsp

3.如果是在遠端伺服器裡ajax()請求外域伺服器裡的頁面,即使通過伺服器環境執行也會報跨域的錯誤,此時需要通過JSONP的形式!

所以,還是把本地jsp放入tomcat中執行再訪問本地檔案吧!

參考:http://www.exp99.com/jswz/f2e/1415609654_115.html

http://blog.csdn.net/superit401/article/details/72771626